/**************************************
 *
 * VLOOK CSS 基础库
 *
 * V15.1
 * 2022-06-25
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

预加载提示 / body.typora-export #write::before / z-index: 7000;

欢迎页 / .v-welcome-page / z-index: 6000;

底部信息栏 / .v-bottom-tips / z-index: 5001;
聚光灯 / .v-spotlight / z-index: 5000;

---------- 高优先信息 UI 区 -----

无效链接清单 / .v-link-error-list / z-index: 4500;
工具栏提示、弹窗提示、字体风格切换 / .v-tool-tips, .v-info-tips, .v-font-theme / z-index: 3000;

---------- 二级 UI 区 ----------

插图导航 / .v-fig-nav / z-index: 2200;
脚注面板 / .v-foot-note-panel / z-index: 2100;
导航中心收起/展开引导把手 / .v-toc-handle / z-index: 2000;
导航中心面板 / .v-nav-center / z-index: 2000;
    导航中心头部 / .v-nav-center-header / z-index: 10;
    导航中心脚部 / .v-nav-center-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .v-mask / z-index: 1000;
画中画 / .v-pic-in-pic / z-index: 500;

---------- 增强工具操作区 ----------

Mermaid工具提示 / div.mermaidTooltip / z-index: 100;
工具栏 / .v-toolbar / z-index: 100;
状态栏 / .v-status-bar / z-index: 100;
逐章导航面板 / .v-chapter-nav / z-index: 100;
文档更多内容遮挡栏 / .v-more-doc-content-before, .v-more-doc-content-after / z-index: 99;

---------- 文档内容交互区 ----------

在新标签中打开按钮 / .v-btn-open-in-new-tab / z-index: 50;
内容辅助操作栏 / .v-content-assist-bar / z-index: 50;
内容展开操作区 / .v-content-expander / z-index: 10;

---------- 导航中心 ----------

导航中心内文档抽屉入口 .v-doc-lib-board / z-index: 20;
导航中心内的分段控制按钮 .v-segment-indicator / z-index: 10
导航中心内的当前分段选择指示器 .v-segment-indicator / z-index: 0

**************************************/

//-----
// #Color_Scheme
// Light Mode 时图片的非网格背景
@figureSolidBgLight: #FFFFFF;
// Dark Mode 时图片的非网格背景
@figureSolidBgDark: #000000;

// -----
// #Common_LESS_Var
@paragraphPadding: 0.625em; // 段落空白
@tableRowNumTop: 2px; // 表格行自动编号的高度
@tableRowCursor: "▶️"; // 表格当前行鼠标 hover 游标
@focusCursor: "✏️"; // 编辑焦点行游标
@focusStyle: @aBorderWidth dashed @aLineColor; // 焦点、焦点行样式
@paragraphPadding: 0.75em;
@miniLineHeight: 1;
@defaultLineHeight: 1.5;
@paragraphInnerLineHeight: 1.8;

:root {
    // 图片的线状网格背景（Light / Dark）
    --v-fig-grid-l-lg: url("");
    --v-fig-grid-l-dk: url("");
    // 图片的块状网格背景（Light / Dark）
    --v-fig-grid-b-lg: url("");
    --v-fig-grid-b-dk: url("");
    // Dark Mode 时反色的图片网格背景
    --v-fig-grid-l-invert: url("");
    --v-fig-grid-b-invert: url("");

    // 光标：复制
    --cur-copy: var(--cur-copy-normal);
    --cur-copy-normal: url(""), auto !important;
    --cur-copy-as-md: url(""), auto !important;

    --v-float-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); // 按钮类外阴影
    --v-float-inn-shadow: 0 0 0 1px var(--tbl-th-bg) inset; // 按钮类内阴影（边框）
}

// -----
// #Common_CSS_Var
:root {
    // #VLOOK_Var
    --v-theme-name: @themeName; // 主题名称
    --v-theme-version: "V15.1"; // 主题版本，对应适配 VLOOK.JS 的版本
    --v-color-scheme: light; // 默认颜色模式为：Light 明亮

    // 导航中心、工具栏相关 UI 尺寸
    --v-nav-center-width:340px;
    --v-nav-center-hidden-left:-350px;
    --v-toolbar-btn-width:36px;
    --v-toolbar-btn-space:5px;
    --v-top-margin:8px;

    // 过渡效果设置
    --v-trans-dur: 200ms;
    --v-trans-value: all var(--v-trans-dur) ease-in-out;

    // --------------------
    // 用于 plugin*.txt 中
    --v-btn-bg: @buttonBgColor;
    --v-btn-f: @buttonForeColor;
    // --v-theme-bg-dk: @themeBgColorDark;
}

@import "typora";
@import "mermaid";

html {
    font-size: @fontSize;
}

// 选中内容的样式
::selection {
    background: @selectionColor !important;
    color: @buttonForeHoverColor !important;
    fill: var(--d-bc) !important; // for SVG text
}

// VLOOK 未加载完成前的样式
body.typora-export #write::before {
    content: "Preparing VLOOK™ plugin ...";
    color: fade(@buttonForeColor, 50%);
    background: @buttonBgColor;
    // background: radial-gradient(var(--v-theme-bg-dk) 0%, var(--v-btn-bg) 50%, var(--v-btn-bg));
    // background: linear-gradient(var(--v-theme-bg-dk) 0%, var(--v-btn-bg) 50%, var(--v-btn-bg));
    font: italic var(--v-f-w-bd) 2em/10 var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-style: italic;
    // font-weight: var(--v-f-w-bd);
    // font-size: 2em;
    // line-height: 10;
    // font-family: var(--v-f-fm-bd);
    text-align: center;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 7000;
}

// VLOOK 已完成加载的样式
.v-load-done {
    display: block !important;
}
.v-load-done::before {
    display: none !important;
    font-style: normal;
}

body {
    // background-image: var(--d-bi);
    // background: var(--d-bc);
    background: var(--d-bc) var(--d-bi);
    color: var(--d-f-c);
    font: var(--v-f-w-text) @fontSize/@paragraphInnerLineHeight var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-text);
    // font-family: var(--v-f-fm-text);
    // line-height: @paragraphInnerLineHeight;
    caret-color: @aHoverColor;
    -webkit-tap-highlight-color: transparent;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

// 解结，可滚动
body.freeze {
    overflow: hidden;
}
// 冻结，不可滚动
body.unfreeze {
    overflow: auto;
}

// #write img {
//     user-select: auto !important;
//     pointer-events: auto !important;
// }

// img,
#write p > img:only-child,
#write p > .md-image:only-child:not(.md-img-error) img, // 是指 p 内只有 img 的才被视为插图
#write img[src*="mode=figure"],
#write svg[data-inject-url*="mode=figure"],
#write .md-image[data-src*="#figure"] > img, // 编辑时
#write img[src*="#figure"],
#write svg[data-inject-url*="#figure"],
.v-fig,
.md-diagram-panel svg {
    background: var(--d-bc);
    // background: var(--d-bi);
    border-radius: var(--v-r-b);
    padding: 0;
    border: 2px solid var(--pn-c);
}

#write p > .md-image:only-child {
    margin-left: -1em; // 编辑时图片因为 p 向右缩进了 1em，所以须向左相应缩进 1em 以适配
    margin-top: -0.8em; // 因为 p 进行 margin-top 间隔，在此须取消
    // font-size: 1em;
    font-size: 16px;
}

// 图片 URL 参数指定是否填充边缘
#write img[src*="padding=true"],
#write svg[data-inject-url*="padding=true"],
#write .md-image[data-src*="#padding"] > img, // 编辑时
#write img[src*="#padding"],
#write svg[data-inject-url*="#padding"] {
    padding: 20px !important;
}
// 图片 URL 参数指定是否使用行内样式
#write img[src*="inline=true"],
#write svg[data-inject-url*="inline=true"],
#write .md-image[data-src*="#inline"] > img, // 编辑时
#write img[src*="#inline"],
#write svg[data-inject-url*="#inline"] {
    margin-bottom: @paragraphPadding !important;
    // margin-bottom: 20px !important;
    // margin-right: 20px !important;
}

// 图片 URL 参数指定是否使用网格背景
#write img[src*="grid=line"],
#write svg[data-inject-url*="grid=line"] {
    background: var(--v-fig-grid-l-lg);
    // background: url(@figureGridLineLight);
}
#write img[src*="grid=block"],
#write svg[data-inject-url*="grid=block"] {
    background: var(--v-fig-grid-b-lg);
    // background: url(@figureGridBlockLight);
}

// 图片 URL 参数指定进行颜色替换
#write img[d-img-fill="text"],
#write img[d-img-fill="theme1"],
#write img[d-img-fill="theme2"] {
    left: -12345px;
    border-color: transparent;
    position: relative;
}

// 图片 URL 参数指定图片的显示版式为：icon
#write img[src*="mode=icon"],
#write svg[data-inject-url*="mode=icon"],
#write .md-image[data-src*="#icon"] > img, // 编辑时
#write img[src*="#icon"],
#write svg[data-inject-url*="#icon"] {
    display: inline !important;
    height: 1.25em;
    width: auto;
    margin-top: -4px !important;
    vertical-align: middle;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}
#write img[src*="mode=icon2x"],
#write svg[data-inject-url*="mode=icon2x"],
#write .md-image[data-src*="#icon2x"] > img, // 编辑时
#write img[src*="#icon2x"],
#write svg[data-inject-url*="#icon2x"] {
    height: 2em;
}

// 图片 URL 参数指定图片的显示版式为：logo
#write img[src*="mode=logo"],
#write svg[data-inject-url*="mode=logo"],
#write .md-image[data-src*="#logo"] > img, // 编辑时
#write img[src*="#logo"],
#write svg[data-inject-url*="#logo"] {
    display: inline !important;
    vertical-align: middle;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}
// 左对齐
#write img[src*="mode=logol"],
#write svg[data-inject-url*="mode=logol"],
#write .md-image[data-src*="#logol"] > img, // 编辑时
#write img[src*="#logol"],
#write svg[data-inject-url*="#logol"] {
    float: left !important;
    padding: 0 20px 0 0;
}
// 右对齐
#write img[src*="mode=logor"],
#write svg[data-inject-url*="mode=logor"],
#write .md-image[data-src*="#logor"] > img, // 编辑时
#write img[src*="#logor"],
#write svg[data-inject-url*="#logor"] {
    float: right !important;
    padding: 0 0 0 20px;
}

// 图片 URL 参数指定图片的显示版式为：frame
#write img[src*="mode=frame"],
#write svg[data-inject-url*="mode=frame"],
#write .md-image[data-src*="#frame"] > img, // 编辑时
#write img[src*="#frame"],
#write svg[data-inject-url*="#frame"] {
    display: inline !important;
    vertical-align: middle;
    border: 2px solid var(--pn-c) !important;
    border-radius: var(--v-r-b) !important;
    background: none !important;
    margin-bottom: 20px !important;
}
// 左对齐
#write img[src*="mode=framel"],
#write svg[data-inject-url*="mode=framel"],
#write .md-image[data-src*="#framel"] > img, // 编辑时
#write img[src*="#framel"],
#write svg[data-inject-url*="#framel"] {
    float: left !important;
    padding: 0 20px 0 0;
}
// 右对齐
#write img[src*="mode=framer"],
#write svg[data-inject-url*="mode=framer"],
#write .md-image[data-src*="#framer"] > img, // 编辑时
#write img[src*="#framer"],
#write svg[data-inject-url*="#framer"] {
    float: right !important;
    padding: 0 0 0 20px;
}

// 图片默认对齐方式，或 URL 参数指定左对齐
// 须放在各种版式的样式之后，避免 display 属性冲突
// 导出为 HTML 后的插图（不包括版式为 logo / frame 等），由 vlook.js 进行二次调整，详见 __initAlign
// img,
#write img[src*="mode=figure"],
#write svg[data-inject-url*="mode=figure"],
#write p > img:only-child,
#write p > .md-image:only-child:not(.md-img-error) > img, // 是指 p 内只有 img 的才被视为插图
#write p > img:only-child[src*="align=left"],
#write p > svg[data-inject-url*="align=left"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="align=left"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="align=left"],
#write p > .md-image:only-child[data-src*="#left"]:not(.md-img-error) > img, // 编辑时
#write p > img:only-child[src*="#left"],
#write p > svg[data-inject-url*="#left"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="#left"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="#left"] {
    display: block !important;
    margin: 0 !important;
}
// 图片 URL 参数指定居中对齐
#write p > img[src*="align=center"],
#write p > svg[data-inject-url*="align=center"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="align=center"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="align=center"],
#write p > .md-image:only-child[data-src*="#center"]:not(.md-img-error) > img, // 编辑时
#write p > img[src*="#center"],
#write p > svg[data-inject-url*="#center"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="#center"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="#center"] {
    display: block !important;
    margin: auto !important;
}
// 图片 URL 参数指定右对齐
#write p > img[src*="align=right"],
#write p > svg[data-inject-url*="align=right"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="align=right"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="align=right"],
#write p > .md-image:only-child[data-src*="#right"]:not(.md-img-error) > img, // 编辑时
#write p > img[src*="#right"],
#write p > svg[data-inject-url*="#right"],
#write p > .md-image:only-child:not(.md-img-error) > img[src*="#right"],
#write p > .md-image:only-child:not(.md-img-error) > svg[data-inject-url*="#right"] {
    display: block !important;
    margin: auto !important;
    margin-right: 0 !important;
}

#write audio {
    margin: 0 10px 0 10px;
    border-radius: var(--v-r-s);
}

#write sup.md-footnote > a,
#write .v-q sup.md-footnote > a {
    color: var(--d-bc) !important;
    background: var(--d-f-c-alt);
    margin: 0;
    text-decoration: none;
    box-shadow: none;
    text-shadow: none;
    border-bottom: none;
    padding: 0 5px;
    border-radius: var(--v-r-b);
    font: var(--v-f-w-bd) 0.8em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 0.8em;
    // font-family: var(--v-f-fm-bd);
}

#write sup.md-footnote > a:hover {
    background: @aLineColor;
    color: @buttonForeColor !important;
}

.footnote-line > a:not(.reversefootnote) {
    color: var(--d-f-c);
    text-decoration: none;
}

#write a,
body.typora-export a {
    color: var(--a-color) !important;
    text-shadow: 0 1px 0 var(--d-bc);
    font-weight: var(--v-f-w-text);
    text-decoration: none;
}
// 链接内的上标、上标内的链接
#write a sup,
#write sup a,
#write sup a span  {
    color: @buttonBgColor;
    border-bottom: none;
    font-weight: var(--v-f-w-bd);
}
#write a:hover sup,
#write sup a:hover span {
    color: @aHoverColor !important;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"] {
    border-bottom: none;
}
// kbd 中的链接样式
#write kbd a {
    color: var(--d-bc) !important;
    border-bottom: none;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"]:active,
// kbd 中的链接样式
#write kbd a:active {
    border: none;
}

// 指定不使用链接样式
#write a[href*="lnkcss=none"]:hover,
// kbd 中的链接样式
#write kbd a:hover {
    // color: @aHoverColor !important;
    box-shadow: none;
    border-bottom: none;
}

// 链接中的 kbd 样式
#write a kbd {
    color: @buttonForeColor;
    // color: @buttonForeColor !important;
    font:  var(--v-f-w-bd) 0.875em/@paragraphInnerLineHeight var(--v-f-fm-key) !important; // [style] [weight] [size/[line-height]] [family]
    // font-family: var(--v-f-fm-key) !important;
    background: @buttonBgColor;
    margin: 5px 0;
    // margin: 0;
    border: 0;
    border-radius: var(--v-r-b);
    display: inline-block;
    box-shadow: var(--v-float-shadow), @contrastBorder;
    text-shadow: none;
    padding: 5px 10px;
    caret-color: var(--d-bc);
}
#write a kbd:hover,
#write .v-q a kbd:hover, // 针对彩虹引用内的情况
#write .v-q .v-q a kbd:hover { // 针对彩虹引用内的情况
    color: @buttonForeHoverColor;
    background: @aHoverColor;
}
// 针对彩虹引用内的情况
#write .v-q a kbd {
    color: --d-bc-lg !important;
}
// 链接中的 kbd 样式
#write a kbd:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%);
    transition: none;
}

#write blockquote a kbd {
    border-radius: var(--v-r-s);
    padding: 2px 8px;
}

// 标题内链接样式
#write h1 a,
#write h2 a,
#write h3 a,
#write h4 a,
#write h5 a,
#write h6 a {
    color: @headerColor !important;
    font-weight: inherit;
}

#write a:hover,
body.typora-export a:hover {
    color: @aHoverColor !important;
    box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}
// 链接 hover 时，链接内图片样式
#write a:hover img,
#write a:hover svg {
    filter: brightness(1.1);
}
#write a:hover img[src*="darksrc=invert"],
#write a:hover svg[data-inject-url*="darksrc=invert"] {
    filter: var(--v-invert-dk) brightness(1.3);
}

// 链接 hover 时含图片颜色替换的样式
#write a:hover img[d-img-fill="text"],
#write a:hover img[d-img-fill="theme1"],
#write a:hover img[d-img-fill="theme2"] {
    left: -12345px;
    filter: drop-shadow(12345px 0px @aHoverColor) !important;
    position: relative;
}
// 链接 hover 时其内嵌按钮的内嵌 img 图片
#write a:hover kbd img[d-img-fill="text"],
#write a:hover kbd img[d-img-fill="theme1"],
#write a:hover kbd img[d-img-fill="theme2"] {
    filter: drop-shadow(12345px 0px @buttonForeHoverColor) !important;
}
// 链接 hover 时其内嵌按钮的内嵌 svg 图片颜色替换的样式
#write a:hover kbd svg[d-img-fill] path,
#write a:hover kbd svg[d-img-fill] rect,
#write a:hover kbd svg[d-img-fill] ellipse,
#write a:hover kbd svg[d-img-fill] polygon {
    fill: @buttonForeHoverColor !important;
}
// 针对彩虹引用内的情况
#write .v-q a:hover kbd svg[d-img-fill] path,
#write .v-q a:hover kbd svg[d-img-fill] rect,
#write .v-q a:hover kbd svg[d-img-fill] ellipse,
#write .v-q a:hover kbd svg[d-img-fill] polygon {
    fill: --d-bc-lg !important;
}
// 链接 active 时，链接内图片样式
#write a:active img {
    filter: brightness(0.8);
}

#write a:active,
body.typora-export a:active {
    color: var(--d-f-c) !important;
    background: var(--pn-c);
    border-bottom: 0;
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
    border-radius: var(--v-r-s);
    transition: none;
}

// 默认的超链接样式
// #write a:not([name^="ref-footnote"]):hover {
//     color: @accColorBrown !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorBrown, 30%) inset !important;
// }
#write a:not([name^="ref-footnote"]):hover::before {
    content: "Link - " attr(href); // 非页内链接的符号
    // white-space: pre;
    margin-top: -1.5em;
    vertical-align: super;
    color: #FFFFFF;
    background: @accColorBrown;
    text-shadow: none;
    border-radius: var(--v-r-tag);
    padding: 2px 3px;
    font: var(--v-f-w-title) 0.5em/@miniLineHeight var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // font-size: 0.5em;
    // line-height: @paragraphInnerLineHeight;
    // font-family: var(--v-f-fm-key);
    position: absolute;
    z-index: 99999;
    letter-spacing: 0;
}
#write table a:not([name^="ref-footnote"]):hover::before,
body.typora-export table a:not([name^="ref-footnote"]):hover::before {
    margin-top: -1em;
}

// 页内链接
// #write a[class*="md-toc-inner"]:hover,
// #write a[href^="#"]:hover {
//     color: @accColorGray !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorGray, 30%) inset !important;
// }
#write a[class*="md-toc-inner"]:hover::before,
#write a[href^="#"]:hover::before {
    content: "#";
    background: @accColorGray;
}
// md 文档
// #write a[href*=".md"]:hover {
//     color: var(--d-f-c) !important;
//     box-shadow: 0 -0.3em 0 0 var(--rb-code-shadow) inset !important;
// }
#write a[href*=".md"]:hover::before {
    content: "M⬇ Markdown file";
    color: var(--d-bc);
    background: var(--d-f-c);
}
// VLOOK 文库专用链接
// #write a[href="vlook-doc-lib"]:hover,
// #write a[target="vlook-doc-lib"]:hover {
//     color: @buttonBgColor !important;
//     box-shadow: 0 -0.3em 0 0 fade(@buttonBgColor, 30%) inset !important;
// }
#write a[href="vlook://doc-lib"]:hover::before,
#write a[target="vlook://doc-lib"]:hover::before {
    content: "❏ VLOOK™ Document Library";
    color: @buttonForeColor;
    background: @buttonBgColor;
}
// HTTPS 协议
// #write a[href^="http://"]:hover {
//     color: @aLineColor !important;
//     box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset !important;
// }
#write a[href^="http://"]:hover::before {
    content: "HTTP";
    background: @aLineColor;
}
// #write a[href^="https://"]:hover {
//     color: @accColorGreen !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorGreen, 30%) inset !important;
// }
#write a[href^="https://"]:hover::before {
    content: "Secure Link";
    background: @accColorGreen;
}
// MAILTO 协议
// #write a[href^="mailto:"]:hover {
//     color: @accColorBlue !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorBlue, 30%) inset !important;
// }
#write a[href^="mailto:"]:hover::before {
    content: "Email";
    background: @accColorBlue;
}
// 文档资源
// #write a[href$=".pdf"]:hover,
// #write a[href$=".doc"]:hover,
// #write a[href$=".docx"]:hover,
// #write a[href$=".xls"]:hover,
// #write a[href$=".xlsx"]:hover,
// #write a[href$=".ppt"]:hover,
// #write a[href$=".pptx"]:hover,
// #write a[href$=".txt"]:hover,
// #write a[href$=".csv"]:hover {
//     color: @accColorCyan !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorCyan, 30%) inset !important;
// }
#write a[href$=".pdf"]:hover::before,
#write a[href$=".doc"]:hover::before,
#write a[href$=".docx"]:hover::before,
#write a[href$=".xls"]:hover::before,
#write a[href$=".xlsx"]:hover::before,
#write a[href$=".ppt"]:hover::before,
#write a[href$=".pptx"]:hover::before,
#write a[href$=".txt"]:hover::before,
#write a[href$=".csv"]:hover::before {
    content: "Document";
    background: @accColorCyan;
}
// 归档资源
// #write a[href$=".zip"]:hover,
// #write a[href$=".rar"]:hover,
// #write a[href$=".7z"]:hover,
// #write a[href$=".gz"]:hover,
// #write a[href$=".tar"]:hover,
// #write a[href$=".dmg"]:hover,
// #write a[href$=".cab"]:hover {
//     color: @accColorOrange !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorOrange, 30%) inset !important;
// }
#write a[href$=".zip"]:hover::before,
#write a[href$=".rar"]:hover::before,
#write a[href$=".7z"]:hover::before,
#write a[href$=".gz"]:hover::before,
#write a[href$=".tar"]:hover::before,
#write a[href$=".dmg"]:hover::before,
#write a[href$=".cab"]:hover::before {
    content: "Archive File";
    background: @accColorOrange;
}
// 可执行文件
// #write a[href$=".exe"]:hover,
// #write a[href$=".sh"]:hover {
//     color: @accColorRed !important;
//     box-shadow: 0 -0.3em 0 0 fade(@accColorRed, 30%) inset !important;
// }
#write a[href$=".exe"]:hover::before,
#write a[href$=".sh"]:hover::before {
    content: "!! High Risk !!";
    background: @accColorRed;
}

// 下划线
#write u {
    text-decoration: none;
    border-bottom: 1px solid var(--d-f-c);
}

#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
    color: var(--h-f);
    text-align: @headerTextAlign;
    position: relative;
    margin: 1em 0 0.5em 0;
    padding: @headerPadding;
    line-height: @defaultLineHeight;
    font: var(--v-f-w-title) 0.5em var(--v-f-fm-h); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // font-family: var(--v-f-fm-h);
    // border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    border-radius: var(--v-r-b);
    background: @headerBackground;
    letter-spacing: @headerLetterSpacing;
}
#write h6 {
    text-align: left;
    // letter-spacing: 0;
}

#write h1+ul,
#write h1+ol,
#write h2+ul,
#write h2+ol,
#write h3+ul,
#write h3+ol,
#write h4+ul,
#write h4+ol,
#write h5+ul,
#write h5+ol,
#write h6+ul,
#write h6+ol {
    margin-top: 0;
}

#write h1 {
    margin-top: 3em;
    font-size: 2em;
    box-shadow: @h1Shadown;
    border-left: @h1BorderLeft;
    border-right: @h1BorderRight;
    border-top: @h1BorderTop;
}

#write h2 {
    margin-top: 3em;
    font-size: 1.8em;
    box-shadow: @h2Shadown;
    border-left: @h2BorderLeft;
    border-right: @h2BorderRight;
    border-top: @h2BorderTop;
}

// h1 后紧跟 h2，或是只有普通正文段落的情况
// h1 + p + h2,
#write h1 + h2 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: -0.5em;
    border-top: 0;
}

#write h3 {
    margin-top: 2em;
    font-size: 1.6em;
    box-shadow: @h3Shadown;
    border-left: @h3BorderLeft;
    border-right: @h3BorderRight;
    border-top: @h3BorderTop;
}

// h2 后紧跟 h3，或是只有普通正文段落的情况
// h2 + p + h3,
#write h2 + h3 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: -0.5em;
    border-top: 0;
}

#write h4 {
    margin-top: 2em;
    font-size: 1.4em;
    box-shadow: @h4Shadown;
    border-left: @h4BorderLeft;
    border-right: @h4BorderRight;
    border-top: @h4BorderTop;
}

// h3 后紧跟 h4，或是只有普通正文段落的情况
// h3 + p + h4,
#write h3 + h4 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: -0.5em;
    border-top: 0;
}

#write h5 {
    font-size: 1.25em;
    box-shadow: @h5Shadown;
    border-left: @h5BorderLeft;
    border-right: @h5BorderRight;
    border-top: @h5BorderTop;
}

// h4 后紧跟 h5，或是只有普通正文段落的情况
// h4 + p + h5,
#write h4 + h5 {
    box-shadow: none;
    background: @multiHeaderBG;
    margin-top: -0.5em;
    border-top: 0;
}

#write h6 {
    margin-bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font: var(--v-f-w-bd) 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 1.25em;
    // font-family: var(--v-f-fm-subtitle);
    box-shadow: @h6Shadown;
    border-left: @h6BorderLeft;
    border-right: @h6BorderRight;
    border-top: @h6BorderTop;
    background: none;
}
#write > pre.md-meta-block:first-child + h6::after, // 封面，有 YAML 的情况
#write > h6:first-child::after, // 封面，无 YAML 的情况
#write > h1:last-child::after, // 封底
#write blockquote h6::after {
    margin-left: 0;
    padding-bottom: 0;
    border: 0;
}

#write h1 + h6,
#write h2 + h6,
#write h3 + h6,
#write h4 + h6,
#write h5 + h6,
#write h6 + h6 {
    margin-top: 0;
    padding-top: 0;
}

#write li > h6 {
    // 用于：子表
    color: var(--h-f);
    border-left: 0;
    padding-left: 0;
}

#write li > h6::before {
    content: "▪ ";
    color: @contentHeaderNumColor;
}

body.typora-export strong,
#write strong {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-bd);
}

body.typora-export strong a,
#write strong a {
    font-weight: var(--v-f-w-bd);
}

#write hr {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: @aBorderWidth solid var(--pn-c);
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body > div > h1:first-of-type {
    border-top: 0;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

#write a:first-child > h1,
#write a:first-child > h2,
#write a:first-child > h3,
#write a:first-child > h4,
#write a:first-child > h5,
#write a:first-child > h6 {
    margin-top: 0;
    padding-top: 0;
}

// 配合段落导航使用
// #write ul > li,
// #write ol > li,
// #write p,
#write figure,
#write .md-diagram-panel {
    text-align: left;
    margin-top: 0;
}

#write figure {
    padding-bottom: 1px;
    margin-bottom: @paragraphPadding;
    // margin-bottom: 20px;
    border-radius: var(--v-r-b);
}

// 有序、无序列表符号样式
#write ::marker,
#write li::before {
    // font: normal 1em var(--v-f-fm-num); // [style] [weight] [size/[line-height]] [family]
    font-family: var(--v-f-fm-num);
    // color: var(--d-f-c-alt);
    color: var(--h-f);
}

#write ul,
ol {
    // padding-left: 1.25em;
    // padding-right: 0.625em;
    padding-left: 2em;
    padding-right: 1em;
    padding-bottom: 0;
}
// 除图片插图外的段落样式
#write > p:not([class*=v-cap-cntr]) {
    padding-left: 1em; // 编辑时图片的向右缩进适配，通过 p > .md-image:only-child 调整
    padding-right: 1em;
    margin-bottom: 0;
}
// ----------------------------------------
// 段落间距样式
#write p,
#write li {
    margin-top: @paragraphPadding;
    // word-break: break-all;
    // word-wrap: break-word;
    word-break: normal;
    word-wrap: break-word;
}
#write blockquote > p:first-of-type,
#write ol > li:first-of-type,
#write ul > li:first-of-type {
    margin-top: 0;
}

// 有序列表
#write ol > li { // 1 级
    list-style-type: decimal;
}
#write ol > li > ol > li { // 2 级
    list-style-type: lower-alpha;
}
#write ol > li > ol > li > ol > li { // 3 级
    list-style-type: lower-roman;
}
#write ol > li > ol > li > ol > li > ol > li { // 4 级
    list-style-type: decimal-leading-zero;
}
#write ol > li > ol > li > ol > li > ol > li > ol > li { // 5 级
    list-style-type: upper-alpha;
}
#write ol > li > ol > li > ol > li > ol > li > ol > li > ol > li { // 6 级
    list-style-type: upper-roman;
}

// 无序列表
#write ul > li { // 1 级
    list-style-type: disc;
}
#write ul > li > ul > li { // 2 级
    list-style-type: square;
}
#write ul > li > ul > li > ul > li { // 3 级
    list-style-type: circle;
}
#write ul > li > ul > li > ul > li > ul > li { // 4 级
    list-style-type: disc;
}
#write ul > li > ul > li > ul > li > ul > li > ul > li { // 5 级
    list-style-type: square;
}
#write ul > li > ul > li > ul > li > ul > li > ul > li > ul > li { // 6 级
    list-style-type: circle;
}

#write blockquote,
body:not([class]) blockquote { // 用于在 Typora 中的进行主题预览
    color: var(--d-f-c);
    // background: var(--blockquote-bg);
    background: var(--ac-theme1-fade);
    border-radius: var(--v-r-b);
    padding: 0.75em 1em;
    margin-top: 0;
    margin-bottom: @paragraphPadding;
    // margin-bottom: 20px;
    // margin: 0 1em 20px 1em;
}
#write > blockquote {
    margin-top: @paragraphPadding;
}

// 紧跟图片、表格后的引用样式微调
#write .md-table-fig + blockquote,
#write .md-fences + blockquote,
// 紧跟带自动题注的内容（插图、代码块、表格、音频、视频）后的引用样式微调
#write .v-cap-cntr + blockquote,
#write .v-cap-cntr + .v-content-expander + blockquote {
    background: var(--pn-c);
    border-top-left-radius: 0;
    // border-top-right-radius: 0;
    margin-top: -10px;
}

// 以双栏方式显示，98/2*2+2*1=100
#write hr + blockquote,
#write hr + blockquote + blockquote,
#write .md-hr + blockquote,
#write .md-hr + blockquote + blockquote {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 49% !important;
    min-width: 49% !important;
    vertical-align: top;
}
// 双栏内容之间的样式
#write hr + blockquote + blockquote,
#write .md-hr + blockquote + blockquote  {
    margin-left: 2% !important;
}

// 以三栏方式显示，96/3*3+2*2=100
#write hr + hr + blockquote,
#write hr + hr + blockquote + blockquote,
#write hr + hr + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + blockquote,
#write .md-hr + .md-hr + blockquote + blockquote,
#write .md-hr + .md-hr + blockquote + blockquote + blockquote {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 32% !important;
    min-width: 32% !important;
    vertical-align: top;
}
// 三栏内容之间的样式
#write hr + hr + blockquote + blockquote,
#write hr + hr + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + blockquote + blockquote,
#write .md-hr + .md-hr + blockquote + blockquote + blockquote  {
    margin-left: 2% !important;
}

// 以四栏方式显示，94/4*4+2*3=100
#write hr + hr + hr + blockquote,
#write hr + hr + hr + blockquote + blockquote,
#write hr + hr + hr + blockquote + blockquote + blockquote,
#write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote {
    color: var(--d-f-c);
    display: inline-block !important;
    max-width: 23.5% !important;
    min-width: 23.5% !important;
    vertical-align: top;
}
// 四栏内容之间的样式
#write hr + hr + hr + blockquote + blockquote,
#write hr + hr + hr + blockquote + blockquote + blockquote,
#write hr + hr + hr + blockquote + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote,
#write .md-hr + .md-hr + .md-hr + blockquote + blockquote + blockquote + blockquote  {
    margin-left: 2% !important;
}

#write hr + hr,
#write .md-hr + .md-hr {
    margin-top: -1em;
}

#write blockquote > p {
    margin-bottom: 0;
}

#write blockquote hr {
    border-color: var(--d-f-c);
    // border-color: var(--d-bc);
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.2;
}

#write blockquote h6 {
    padding: 5px 0;
    margin-top: 0;
    color: var(--d-f-c);
    font-size: 1.375em;
}
#write blockquote blockquote h6 {
    font-size: 1.25em;
}

#write blockquote h6 a {
    margin-left: -0.1em;
}

#write blockquote h6::before {
    content: "" !important;
    margin-left: 0 !important;
}

#write blockquote > ul,
#write blockquote > ol {
    margin-top: 0;
}

#write blockquote .CodeMirror-linenumber {
    color: var(--h-f);
}

// 分栏列表
#write hr + ul,
#write hr + ol,
#write .md-hr + ul,
#write .md-hr + ol {
    padding-left: 0 !important;
}
// 以双栏方式显示，98/2*2+2*1=100
#write hr + ul > li,
#write hr + ul > li + li,
#write hr + ol > li,
#write hr + ol > li + li,
#write .md-hr + ul > li,
#write .md-hr + ul > li + li,
#write .md-hr + ol > li,
#write .md-hr + ol > li + li {
    display: inline-block;
    list-style-type: none;
    vertical-align: top;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 49% !important;
    min-width: 49% !important;
}
// 双栏内容之间的样式
#write hr + ol > li + li,
#write .md-hr + ol > li + li {
    margin-left: 2% !important;
}
// 双栏内容微调
#write hr + ul > li > p,
#write hr + ol > li > p,
#write .md-hr + ul > li > p,
#write .md-hr + ol > li > p {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd);
    color: @buttonForeColor;
    background: @buttonBgColor;
    padding: 5px;
    border-radius: var(--v-r-s);
    text-align: center;
}

// 列表内的引用内容
// #write li > blockquote {
//     width: fit-content !important;
//     color: var(--d-f-c-alt);
// }
// 引用的引用（非分栏）
#write blockquote > blockquote,
#write li > blockquote {
    border-left: 5px solid fade(@accColorGray, 20%);
    background: none;
    border-radius: 0;
    padding: 0 0.5em;
}
// 引用内的最后一个引用
#write blockquote > blockquote:last-child {
    margin-bottom: 0;
}

// 引用的引用（分栏）
#write li > hr + blockquote,
#write li > hr + blockquote + blockquote,
#write li > hr + blockquote + blockquote + blockquote,
#write li > hr + blockquote + blockquote + blockquote + blockquote,
#write li > .md-hr + blockquote,
#write li > .md-hr + blockquote + blockquote,
#write li > .md-hr + blockquote + blockquote + blockquote,
#write li > .md-hr + blockquote + blockquote + blockquote + blockquote {
    border: 0;
    border: 0;
    background: var(--blockquote-bg);
    border-radius: var(--v-r-s);
    padding: 0.75em 1em;
}

#write blockquote > strong {
    color: inherit !important;
}

.v-img-lost {
    // background-image: url("") !important;
    background-image: url("") !important;
    background-size: 400px 200px;
    background: var(--pn-c);
    border: 0;
    width: 400px;
    height: 200px;
}

// 坏链列表
.v-link-error-list {
    display: none;
    padding: 10px 0;
    position: fixed;
    color: var(--d-f-c);
    top: 20px;
    right: 20px;
    bottom: 50px;
    width: var(--v-nav-center-width);
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b);
    background: var(--pn-c);
    overflow: auto;
    z-index: 4500;
}
.v-link-error-list-header {
    display: none;
    position: absolute;
    z-index: 10;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(180deg, var(--pn-c) 10px, var(--pn-c-tsp));
    pointer-events: none;
}
.v-link-error-list-body {
    padding: 10px 0;
    height: 100%;
    // overflow-y: scroll;
    z-index: 0;
}
.v-link-error-list-items {
    overflow-y: scroll;
    height: 100%;
    z-index: 0;
}
.v-link-error-list-footer {
    position: absolute;
    z-index: 10;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    top: auto;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(0deg, var(--pn-c) 10px, var(--pn-c-tsp));
    pointer-events: none;
}

.v-status-bar {
    position: fixed;
    justify-content: center;
    align-items: center;
    // vertical-align: middle;
    border-radius: var(--v-r-s);
    right: 30px;
    bottom: 20px;
    // width: auto;
    height: 30px;
    z-index: 100;
}
// .v-status-bar.mini {
//     display: none;
// }
// 状态栏内第 1 个元素
.v-status-bar > div:first-child {
    border-top-left-radius: var(--v-r-s);
    border-bottom-left-radius: var(--v-r-s);
    border: 0;
}
// 状态栏内最后 1 个元素
.v-status-bar > div:last-child {
    border-top-right-radius: var(--v-r-s);
    border-bottom-right-radius: var(--v-r-s);
    border: 0;
}

// 文档信息
.v-doc-info {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--d-f-c);
    font: normal 0.875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-subtitle);
    background: var(--pn-c);
    padding: 0 10px;
    min-width: 80px;
    height: 30px;
    opacity: 0.6;
    cursor: default;
}

// 缩放
.v-zoom-view {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonBgColor;
    font: var(--v-f-w-title) 0.875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-subtitle);
    background: var(--pn-c);
    padding: 0 10px;
    min-width: 80px;
    height: 30px;
    border-left: 1px solid var(--pn-c-alt);
    opacity: 0.6;
    cursor: pointer;
}
.v-zoom-view.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

// 链接检查结果
.v-link-chk-result {
    // display: none;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--d-f-c);
    // background: var(--pn-c);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    display: inline-flex;
    cursor: pointer;
    background: var(--ac-blue-lg);
}
.v-link-chk-result.error {
    background: var(--ac-red-lg);
}
.v-link-result-error:hover {
    background: var(--d-f-c);
}
.v-link-result-error:hover > svg > use {
    fill: var(--d-bc);
}
.v-link-result-error:active {
    background: var(--ac-red-lg);
    box-shadow: 0 0 0 2px fade(@accColorRed, 50%);
}
.v-link-result-error:active > svg > use {
    fill: #FFFFFF;
}

.v-link-error-source:focus {
    outline: 2px dashed var(--ac-red-lg);
}

// table {
#write table,
body.typora-export table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: @defaultLineHeight;
    word-break: break-all;
    white-space: pre-wrap;
    border: 2px solid var(--tbl-bder);
    border-radius: var(--v-r-b);
    background: var(--d-bc);
    // background: var(--d-bi);
}

// 避免分页后重复显示表头
#write thead {
    display: contents !important;
}

// 表格表头
#write table > thead > tr > th,
body.typora-export table > thead > tr > th {
// table > thead > tr > td {
    background: var(--tbl-th-bg);
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-bd);
    border-right: 1px solid var(--tbl-cell-bder);
    margin: 0;
    padding: 0.5em;
    box-shadow: 0 1px 0 var(--tbl-cell-bder);
}

#write table tr > td,
body.typora-export table tr > td {
    border-right: 1px solid var(--tbl-cell-bder);
    margin: 0;
    padding: 5px;
    vertical-align: top;
}

// 首行
#write table > tbody > tr:first-child > td,
body.typora-export table > tbody > tr:first-child > td {
    box-shadow: 0 -2px 0 0 var(--tbl-h-br);
}
// 非首行
#write table > tbody > tr:not(:first-child) > td,
body.typora-export table > tbody > tr:not(:first-child) > td {
    box-shadow: 0 -1px 0 0 var(--tbl-cell-bder);
}

// 偶数行
#write table > tbody > tr:nth-child(2n),
body.typora-export table > tbody > tr:nth-child(2n) {
    background: var(--tbl-td-bg);
}

// 表头首行的首列
#write table > thead > tr:first-child > th:first-child,
body.typora-export table > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
    white-space: pre;
}

// 表头首行的尾列
#write table > thead > tr:first-child > th:last-child,
body.typora-export table > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首列
#write table > tbody > tr:last-child > td:first-child,
body.typora-export table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的尾列
#write table > tbody > tr:last-child > td:last-child,
body.typora-export table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--v-r-t); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格首列
#wirte table tr > th:first-child,
#write table tr > td:first-child,
body.typora-export table tr > th:first-child,
body.typora-export table tr > td:first-child {
    white-space: pre !important; // 表格首列默认不换行
}
// 表格末列
#write table tr > th:last-child,
#write table tr > td:last-child,
body.typora-export table tr > th:last-child,
body.typora-export table tr > td:last-child {
    border-right: 0;
}

// 空白单元格
#write .v-empty-cell,
body.typora-export .v-empty-cell {
    padding: 1px;
    background: var(--tbl-h-br);
    // box-shadow: none !important;
}
// 非首行内的空白单元格
#write table > tbody > tr:not(:first-child) > td.v-empty-cell,
body.typora-export table > tbody > tr:not(:first-child) > td.v-empty-cell {
    box-shadow: none !important;
}

// 重复表头样式
.v-th-repeater {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-bd);
    background: var(--tbl-th-bg);
    // box-shadow: 0 -2px 0 0 var(--tbl-h-br), 0 1px 0 0 var(--tbl-h-br) !important;
    vertical-align: middle !important;
}
.v-th-repeater.first {
    box-shadow: 0 -2px 0 0 var(--tbl-h-br), 0 1px 0 0 var(--tbl-h-br) !important;
}
.v-th-repeater.not-first {
    box-shadow: 0 1px 0 0 var(--tbl-h-br) !important;
}

// 合并了所有列样式
.v-table-colspan-all {
    padding-left: 5px;
    background: var(--tbl-th-bg);
}
// 空白行，不显示对应的行号
.v-table-colspan-all::before {
    content: "";
}

// 表格列格式：加粗
.v-tbl-col-fmt-bold {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-bd);
}

// 表格列格式：斜体
.v-tbl-col-fmt-em {
    font-style: italic;
}

// 表格列格式：高亮
.v-tbl-col-fmt-mark {
    background: var(--mark-bg) !important;
    text-shadow: 0 1px 0 var(--d-bc);
    color: var(--d-f-c) !important;
}

// 表格列格式：数值
.v-tbl-col-fmt-num {
    // font: normal 1em var(--v-f-fm-num) !important; // [style] [weight] [size/[line-height]] [family]
    font-family: var(--v-f-fm-num) !important;
}
.v-tbl-col-fmt-num > span {
    font-size: 1.125em;
}
// 表格列格式：负数
.v-tbl-col-fmt-num-positive {
    color: #D00000;
}
// 表格列格式：正数
.v-tbl-col-fmt-num-negative {
    color: #00B000;
}
// 表格列格式：数值－小数部分
.v-tbl-col-fmt-num-decimal {
    font-size: 0.8em;
}
// 表格列格式：数值－货币
.v-tbl-col-fmt-currency {
    float: left;
    font-weight: normal;
    font-size: 0.8em;
    padding-top: 3px;
    padding-right: 10px;
    color: var(--d-f-c-alt);
}
// 表格列格式：数值－百分号
.v-tbl-col-fmt-percent {
    opacity: 0.6;
    font-size: 0.8em;
}

// 带表格带行折叠时，是目录行的样式
.v-tbl-row-g-folder {
    text-align: left !important;
}
.v-tbl-row-g-folder > .folder-marker {
    color: var(--h-f);
}

// 带表格带行折叠时，不是目录行的样式（有行自动编号）
#write li > figure table tbody > tr > td.v-tbl-row-g-not-folder,
#write h6 + figure table tbody > tr > td.v-tbl-row-g-not-folder,
body.typora-export li > figure table tbody > tr > td.v-tbl-row-g-not-folder,
body.typora-export h6 + figure table tbody > tr > td.v-tbl-row-g-not-folder {
  text-align: left !important;
  padding-left: 50px !important;
}
// 带表格带行折叠时，不是目录行的样式（无行自动编号）
td.v-tbl-row-g-not-folder {
    text-align: left !important;
    padding-left: 25px !important;
}

// 折叠按钮样式
.v-tbl-row-g-btn {
    cursor: pointer;
    vertical-align: middle;
}

.v-tbl-row-g-btn.hover > svg > use {
    fill: @aHoverColor !important;
}
.v-tbl-row-g-btn.hover:active > svg > use {
    fill: @aActiveColor !important;
}

// 被折叠行的样式
.v-tbl-row-g-sub {
    text-align: left !important;
    padding-left: 5px !important;
}

// 缩进的占位元素样式
.v-tbl-row-g-identer {
    width: 4px;
    height: 32px;
    display: inline-block;
    padding: 0;
    margin: -10px 58px -10px 4px;
}
// 带表格行号的样式微调
#write h6 + figure table .v-tbl-row-g-identer,
#write li > figure table .v-tbl-row-g-identer,
body.typora-export h6 + figure table .v-tbl-row-g-identer,
body.typora-export li > figure table .v-tbl-row-g-identer {
    margin-right: 82px;
}

// 连续缩进的占位元素进行修正
.v-tbl-row-g-identer + .v-tbl-row-g-identer {
    margin-left: -12px !important;
}
// 带表格行号的样式微调
#write h6 + figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer,
#write li > figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer,
body.typora-export h6 + figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer,
body.typora-export li > figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer {
    margin-right: 52px !important;
}

// 缩进的单元格为目录节点
.v-tbl-row-g-identer-folder {
    margin-right: 38px;
}
// 带表格行号的样式微调
#write h6 + figure table .v-tbl-row-g-identer-folder,
#write li > figure table .v-tbl-row-g-identer-folder,
body.typora-export figure table .v-tbl-row-g-identer-folder,
body.typora-export li > figure table .v-tbl-row-g-identer-folder {
    margin-right: 62px !important;
}
// 连续缩进的占位元素修正
#write h6 + figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer-folder,
#write li > figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer-folder,
body.typora-export h6 + figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer-folder,
body.typora-export li > figure table .v-tbl-row-g-identer + .v-tbl-row-g-identer-folder {
    margin-right: 30px !important;
}

// li/header下的表格增加表格行号
#write li > figure table,
#write h6 + figure table,
body.typora-export li > figure table,
body.typora-export h6 + figure table {
    counter-reset: tableRowNumber - 1;
}

#write li > figure table tbody tr,
#write h6 + figure table tbody tr,
body.typora-export li > figure table tbody tr,
body.typora-export h6 + figure table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
#write figure table tr::before,
body.typora-export figure table tr::before {
    content: "";
    color: var(--h-f);
    // color: var(--toc-h-num-color);
    font: normal normal 0.8em var(--v-f-fm-num) !important; // [style] [weight] [size/[line-height]] [family]
    // font-style: normal !important;
    // font-weight: normal !important;
    // font-size: 0.8em;
    // font-family: var(--v-f-fm-num);
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: 1em;
    padding-top: 5px;
}

// 列表下的表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
#write li > figure table tbody tr::before,
body.typora-export li > figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    margin-left: -20px;
    color: var(--d-f-c-alt);
    color: var(--h-f);
    position: absolute;
}
// hover 时行号内容样式
#write li > figure table tbody tr:hover::before,
body.typora-export li > figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
    // content: "" !important;
}

// 表格折叠后强制隐藏表格行号
.v-tbl-row-num-hidden::before {
    content: "" !important;
}

// h1-6 下的表格行号
#write h6 + figure table tbody tr::before,
body.typora-export h6 + figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: @tableRowNumTop;
    margin-left: 0px;
    // color: var(--d-f-c-alt);
    color: var(--h-f);
    position: absolute;
}
// hover 时行号内容样式
#write h6 + figure table tbody tr:hover::before,
body.typora-export h6 + figure table tbody tr:hover::before {
    content: @tableRowCursor;
    color: @aLineColor;
}

// 应显示表格行的表格的首列
#write li > figure table tr > th:first-child,
#write li > figure table tr > td:first-child,
#write h6 + figure table tr > th:first-child,
#write h6 + figure table tr > td:first-child,
body.typora-export li > figure table tr > th:first-child,
body.typora-export li > figure table tr > td:first-child,
body.typora-export h6 + figure table tr > th:first-child,
body.typora-export h6 + figure table tr > td:first-child {
    padding-left: 30px;
}

// li/header 后的表格，格式微调
#write li > figure {
    margin-top: 0;
}

// h1-6 后的表格，格式微调
#write h1 + figure,
#write h2 + figure,
#write h3 + figure,
#write h4 + figure,
#write h5 + figure,
#write h6 + figure {
    margin-top: 0;
}

// 表格阅读模式（十字光标）
.v-table-cross {
    top: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.v-table-cross-cell {
    // box-shadow: 0 0 0 2px fade(@aHoverColor, 50%) inset !important;
    box-shadow: 0 0 0 4px var(--d-f-c-alt) !important;
    border-radius: 6px;
}
.v-table-cross.left-up {
    background: linear-gradient(315deg, @tableCrossBgColor, fade(@aLineColor, 1%));
    border-bottom-right-radius: var(--v-r-b);//12px;
}
.v-table-cross.right-up {
    background: linear-gradient(45deg, @tableCrossBgColor, fade(@aLineColor, 1%));
    border-bottom-left-radius: var(--v-r-b);//12px;
}
.v-table-cross.left-down {
    background: linear-gradient(210deg, @tableCrossBgColor, fade(@aLineColor, 1%));
    border-top-right-radius: var(--v-r-b);//12px;
}
.v-table-cross.right-down {
    background: linear-gradient(135deg, @tableCrossBgColor, fade(@aLineColor, 1%));
    border-top-left-radius: var(--v-r-b);//12px;
}

// 高亮
#write mark {
    box-shadow: 0 -0.9em 0 0 var(--mark-bg) inset;
    text-shadow: 0 1px 0 var(--d-bc);
    background: none;
    margin-left: 0.1em;
    margin-right: 0.1em;
    color: inherit;
}

// 删除
#write del,
#write del strong {
    color: var(--d-f-c-alt) !important;
    text-decoration: line-through solid !important;
}

#write del code {
    font-style: italic;
    text-decoration: line-throug solid !important;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: 0.5em;
    padding-bottom: 0.5em;
}

// 弹层中的脚注行
.v-foot-note-panel-content > .footnote-line {
    padding-bottom: 50px;
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accColorBlue;
}

.reversefootnote:hover {
    color: @accColorRed;
}

// 脚注上标
#write a[name^="ref-footnote-"] {
    font: normal 0.75em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-family: var(--v-f-fm-bd);
    color: @accColorBlue;
}

#write a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
}

tt,
code {
    color: var(--d-f-c);
    font: var(--v-f-w-text) 0.875em/@defaultLineHeight var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-text);
    // font-size: 0.875em;
    // line-height: @defaultLineHeight;
    // font-family: var(--v-f-fm-code);
    background: var(--code-bg);
    border-radius: var(--v-r-s);
    padding: 2px 0.5em;
    margin: 0;
    box-shadow: 0 0 0 1px var(--std-code-shadow) inset;
    display: inline-block;
    text-align: inherit;
}
.v-std-code {
    // cursor: pointer;
    cursor: var(--cur-copy);
}
.v-std-code.hover {
    filter: brightness(1.1);
}

strong tt,
strong code {
    font-weight: var(--v-f-w-bd);
}

// 生成题注后的样式调整，未生成题注前的样式主要在编辑时使用
.v-caption > .md-fences {
    margin: 0;
}

.task-list {
    padding-left: 0;
}

.task-list-item {
    padding-left: 32px;
}

.task-list-item input {
    top: 3px;
    left: 8px;
}

.mathjax-block > .code-tooltip {
    bottom: 0.375em;
}

.md-tag {
    color: inherit;
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

#write {
    counter-reset: h1;
}

#write h1 {
    counter-reset: h2;
}

#write h2 {
    counter-reset: h3;
}

#write h3 {
    counter-reset: h4;
}

#write h4 {
    counter-reset: h5;
}

#write h5 {
    counter-reset: h6;
}

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    color: @contentHeaderNumColor;
    letter-spacing: 0;
}

#write h1::before {
    counter-increment: h1;
    content: counter(h1) ".  ";
}

#write h2::before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) "  ";
}

#write h3::before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) "  ";
}

#write h4::before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "  ";
}

#write h5::before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "  ";
}

#write h6::before {
    content: "❖ "; // ◎
}

// 导出 HTML 后的文档章节目录的自动编码内容
body.typora-export #write h1::before,
body.typora-export #write h2::before,
body.typora-export #write h3::before,
body.typora-export #write h4::before,
body.typora-export #write h5::before,
body.typora-export #write h6::before {
    content: attr(d-header-num) !important;
}


// 封面、封底的前信息
#write > pre.md-meta-block:first-child + h6::before,
#write > h6:first-child::before,
#write > h1:last-child::before {
// #write > h6:last-child::before {
    content: "";
}

kbd {
    font: var(--v-f-w-bd) 0.75em var(--v-f-fm-key); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-key);
    border-radius: var(--v-r-s-small);
    margin: 0;
    padding: 0px 4px;
    color: var(--d-bc);
    border: 2px solid var(--key-shadow);
    border-left-color: var(--key-reflect);
    border-top-color: var(--key-reflect);
    background: var(--key-bg);
    box-shadow: 0 0 0 1px var(--key-shadow);
}

table kbd {
    display: inline-block;
    // margin: 2px 0;
}

// 用于覆盖 Typora 默认的用于编辑时大纲面板的列表样式
#write li > :first-child {
    margin-top: 0.5em;
    // margin-top: 0.625em;
}
// 有序、无序列表下的段落（题注段落除外）
#write li p:not([class=v-cap-cntr]) {
    margin-top: 0;
    margin-bottom: 0;
}

// 段落后紧跟有序、无序列表时，减少其行距间隔
#write p + ul,
#write p + ol {
    // margin-top: -1em;
}
// 但在引用内则取消覆盖以上样式
#write blockquote p + ul,
#write blockquote p + ol {
    margin-top: 0;
}
// 在列表内，段落后紧跟有序、无序列表时，保持原行距间隔
#write li > p + ol,
#write li > p + ul {
    margin-top: 0;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// 聚光灯模式
.v-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    z-index: 5000;
}

// 激光笔鼠标形状
.v-cursor-laser {
    cursor: url(""), auto !important;
}

// 过渡效果样式集
.v-transition-all {
    transition: all var(--v-trans-dur) ease-in-out;
}
.v-transition-box-shadow {
    transition: box-shadow var(--v-trans-dur) ease-in-out;
}
.v-transition-opacity {
    transition: opacity var(--v-trans-dur) ease-in-out;
}
.v-transition-left {
    transition: left var(--v-trans-dur) ease-in-out;
}
.v-transition-background {
    transition: background var(--v-trans-dur) ease-in-out;
}

.v-tool-tips,
.v-info-tips {
    // visibility: hidden;
    // opacity: 0;
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border-radius: var(--v-r-b);
    border: 1px solid var(--tbl-bder);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-family: var(--v-f-fm-subtitle);
    // color: var(--tips-bg-inset);
    background: var(--pn-c);
    cursor: default;
    z-index: 3000;
}
.v-info-tips.error {
    color: #FFFFFF;
    border-color: var(--ac-red-lg);
    background: var(--ac-red-lg);
    padding: 5px 10px;
}
.v-info-tips.bubble {
    color: var(--d-bc);
    // line-height: @paragraphInnerLineHeight;
    border-color: var(--d-f-c-alt);
    background: var(--d-f-c);
    // padding-top: 0;
    // padding-bottom: 0;
    padding: 5px 10px;
}

.v-tool-tips {
    visibility: hidden;
    opacity: 0;
    display: block;
    padding: 5px 10px;
    border-top: 0;
    box-shadow: 0 2px 0 0 @aLineColor inset, var(--v-float-shadow), @contrastBorder;
    text-align: left;
    white-space: pre;
    font-size: 0.875em;
}

.v-tool-tips.accent {
    box-shadow: 0 2px 0 0 @buttonBgColor inset, var(--v-float-shadow), @contrastBorder;
}

.v-tool-tips a,
.v-info-tips a {
    // color: var(--tips-bg-inset) !important;
    font-weight: var(--v-f-w-bd);
    text-decoration: none;
}

// 底部信息栏
.v-bottom-tips {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-subtitle);
    color: #FFFFFF;
    text-shadow: 0 1px #000000;
    width: 100%;
    height: 60px;
    text-align: center;
    bottom: 0;
    padding-top: 16px;
    background: linear-gradient(0deg, #404448, transparent);
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 5001;
}
.v-bottom-tips > div {
    bottom: 10px;
    width: 100%;
    position: fixed;
}
.v-bottom-tips kbd {
    margin: 0 4px;
    text-shadow: none;
    color: var(--d-bc-dk);
    border: 3px solid var(--key-shadow-dk);
    border-left-color: var(--key-reflect-dk);
    border-top-color: var(--key-reflect-dk);
    background: var(--key-bg-dk);
    box-shadow: 0 0 0 1px var(--key-shadow-dk);
}

// 字体风格选择器
.v-font-theme {
    width: 462px;
    display: none;
    // visibility: hidden;
    // opacity: 0;
    position: fixed;
    padding: 10px;
    text-align: center;
    border-radius: var(--v-r-b);
    border: 1px solid var(--tbl-bder);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-family: var(--v-f-fm-subtitle);
    // color: var(--tips-bg-inset);
    background: var(--pn-c);
    z-index: 3000;
}

// 字体风格选择器字体包下载提示
.v-font-theme-info {
    font-size: 0.75em;
    width: 100%;
    overflow: auto;
    border-radius: var(--v-r-s);
}

// 字体风格选项：系统默认
.v-font-theme-opt-local,
// 字体风格选项：小清新
.v-font-theme-opt-sans,
// 字体风格选项：文艺范
.v-font-theme-opt-serif {
    border-radius: var(--v-r-s) !important;
    filter: opacity(0.6);
    cursor: pointer;
}

// 字体风格选项鼠标事件效果
.v-font-theme-opt-local:hover,
.v-font-theme-opt-sans:hover,
.v-font-theme-opt-serif:hover {
    filter: opacity(1);
    box-shadow: 0 0 0 2px @aLineColor;
}
.v-font-theme-opt-local:active,
.v-font-theme-opt-sans:active,
.v-font-theme-opt-serif:active {
    box-shadow: 0 0 0 2px @aActiveColor;
}

// 当前选择的字体风格选项
.v-font-theme-opt-local.selected,
.v-font-theme-opt-sans.selected,
.v-font-theme-opt-serif.selected {
    box-shadow: 0 0 0 4px var(--h-f) !important;
    filter: opacity(1) !important;
}

// 字体包信息
.v-fontinfo-local,
.v-fontinfo-sans,
.v-fontinfo-serif {
    margin-top: 10px;
    text-align: left;
    font-size: 0.875em;
}
// 字体包加载状态
.v-fontinfo-local > #fontset-status,
.v-fontinfo-sans > #fontset-status,
.v-fontinfo-serif > #fontset-status {
    color: var(--d-f-c-alt);
}

// 长内容扩展面板
.v-content-expander {
    font: var(--v-f-w-bd) 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-subtitle);
    height: 110px;
    margin-top: -120px;
    background: linear-gradient(0deg, var(--d-bc) 10px, var(--d-bc-tsp));
    border-radius: 0 0 var(--v-r-b) var(--v-r-b);
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    visibility: hidden;
    // display: none;
    // cursor: pointer;
    z-index: 10;
}

.v-content-expander > .v-btn {
    margin-top: 60px;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0.875em;
    border-radius: var(--v-r-s);
    background: @buttonBgColor;
    // display: inline-flex;
}

// Light Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-light {
    margin-top: 100px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-lg);//url(@themeLogoLight);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

// Dark Mode 的文档图标（标签栏、收藏夹图标）
.v-doc-logo-dark {
    display: none;
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: var(--thm-fav-logo-dk);//url(@themeLogoDark);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

.v-welcome-page {
    cursor: wait;
    position: fixed;
    color: @buttonForeColor;
    background: @buttonBgColor;
    // background: radial-gradient(var(--v-theme-bg-dk) 0%, var(--v-btn-bg) 50%, var(--v-btn-bg));
    // background: linear-gradient(var(--v-theme-bg-dk) 0%, var(--v-btn-bg) 50%, var(--v-btn-bg));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    // font: var(--v-f-w-title) 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-size: 1.25em;
    // font-family: var(--v-f-fm-title);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 6000;
}

// 文本呼吸动画
// @keyframes breathe-text {
//     0% {
//       opacity: 1;
//       transform: scale(1.03);
//     }
//     100% {
//       opacity: 0.8;
//       transform: scale(0.99);
//     }
// }

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(120%);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
        filter: brightness(100%);
    }
}

.v-welcome-page > .v-tips {
    font: var(--v-f-w-title) 1.75em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    padding: 20px 20px 10px 20px;
    // animation: 1s breathe-text infinite alternate;
}

.v-welcome-page > .v-tips > div {
    text-align: center;
    line-height: @miniLineHeight;
    margin-bottom: 50px;
}
.v-welcome-page > .v-tips > .v-date {
    font-weight: normal;
    font-size: 0.625em;
    margin-bottom: 20px;
}
.v-welcome-page > .v-tips > .v-author {
    font-weight: normal;
    font-size: 0.875em;
    margin-bottom: 20px;
}
.v-welcome-page > .v-tips > .v-author::before {
    content: "By ";
    font-size: 0.625em;
    opacity: 0.6;
    display: block;
    margin-bottom: 0.375em;
}

.v-welcome-page > .v-loading {
    cursor: not-allowed;
    padding: 0.2em 0.5em;
    // color: @themeBgColor;
    border: 1px solid @buttonForeColor;
    font: italic normal 1.25em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-style: italic;
    // font-weight: normal;
    // font-family: var(--v-f-fm-subtitle);
    display: inline-block;
    border-radius: var(--v-r-b);
    margin-bottom: 2em;
    opacity: 0.5;
}

.v-welcome-page > .v-btn-done {
    cursor: pointer;
    // border: none;
    border: 2px solid @buttonForeHoverColor;
    font-style: normal;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    opacity: 1;
    animation: 1s breathe-button 1 alternate;
}
.v-welcome-page > .v-btn-done:hover {
    color: @aLineColor;
    background: @buttonForeHoverColor;
    box-shadow: var(--v-float-shadow);
}
.v-welcome-page > .v-btn-done:active {
    border: none;
    color: @buttonForeHoverColor;
    background: @aLineColor;
    box-shadow: 0 0 0 2px fade(@aLineColor, 50%);
    transform: none;
}

.v-welcome-page > .v-btn-done.wait {
    animation: 1s breathe-button 10 alternate;
}

.v-welcome-page > .v-btn-done > span {
    font-weight: normal;
}

// 用于段落导航
#write .v-pg-current-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: var(--v-r-b);
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
.md-diagram-panel svg[viewBox^="-"],
.v-fig-content svg[viewBox^="-"] {
    padding-bottom: 8px;
}

// .md-diagram-panel svg,
.v-fig-content svg:not([data-inject-url]) { // 跳过由 SVGInject 生成的 svg
    width: 100%;
}

.v-blockquote-folder {
    cursor: pointer;
    vertical-align: middle;
}

.v-blockquote-folder.hover > svg > use {
    fill: @aHoverColor !important;
}
.v-blockquote-folder.hover:active > svg > use {
    fill: @aActiveColor !important;
}

.v-nav-center {
    background: var(--pn-c);
    border-radius: var(--v-r-b);
    cursor: default;
    display: block;
    left: var(--v-nav-center-hidden-left);
    top: 10px;
    bottom: 40px;
    width: var(--v-nav-center-width);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.v-nav-center-float {
    top: 20px;
    bottom: 50px;
    box-shadow: var(--v-float-shadow);
}

.v-nav-center-block {
    top: 60px;
    bottom: 10px;
    box-shadow: var(--v-float-shadow), var(--v-float-inn-shadow);
}

// 导航中心头部
.v-nav-center-header {
    // color: @docTextColorLight;
    color: var(--d-f-c);
    font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-family: var(--v-f-fm-subtitle);
    height: 100px;
    padding: 0;
    background: linear-gradient(180deg, var(--pn-c) 90px, var(--pn-c-tsp));
    left: 1px;
    right: 1px;
    top: 1px;
    position: absolute;
    border-top-right-radius: var(--v-r-b);
    border-top-left-radius: var(--v-r-b);
    z-index: 10;
}

// 导航中心标签栏
.v-segment {
    text-align: center;
    height: 34px;
    border-radius: var(--v-r-s);
    margin: 10px;
    padding: 2px;
    background: var(--pn-c-alt);
}
// 导航中心标签栏按钮
.v-segment > input[type="radio"] {
    display: none;
}
.v-segment > input[type="radio"]:checked + .v-segment-btn > svg > use {
    // fill: var(--h-f);
    fill: @buttonForeColor;
}

.v-segment > input[type="radio"][d-result="none"] + label,
.v-result-none {
    opacity: 0.2;
    cursor: not-allowed;
}

.v-segment-indicator {
    position: absolute;
    left: 12px;
    // top: 12px;
    top: 52px;
    width: 40px;
    height: 30px;
    background: @buttonBgColor;
    border-radius: calc(var(--v-r-s) - 1px);
    z-index: 0;
}
.v-segment-indicator > svg > use {
    fill: @buttonForeColor;
}

.v-segment-btn {
    width: 16%;
    height: 30px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: calc(var(--v-r-s) - 1px);
    float: left;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    z-index: 10;
}
.v-segment-btn.hover {
    background: @aHoverColor;//var(--blockquote-bg);
}
.v-segment-btn.hover > svg > use {
    fill: @buttonForeHoverColor;//var(--d-f-c);
}
.v-segment-btn:active {
    background: @aActiveColor;//var(--d-f-c-alt);
    // box-shadow: 0 0 0 2px var(--tbl-bder);
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
}
.v-segment-btn:active > svg > use {
    fill: @buttonForeHoverColor;//var(--d-bc);
}
// 大纲索引 tab
.v-segment-btn.catalog {
    margin: 0 0.8% 0 0;
}
// 插图索引 tab
.v-segment-btn.figure {
    margin: 0 0.8% 0 0;
}
// 表格索引 tab
.v-segment-btn.table {
    margin: 0 0.8% 0 0;
}
// 多媒体索引 tab
.v-segment-btn.media {
    margin: 0 0.8% 0 0;
}
// 代码块索引 tab
.v-segment-btn.codeblock {
    margin: 0 0.8% 0 0;
}
// 访问历史 tab
.v-segment-btn.history {
    margin: 0;
}

.v-nav-center-body {
    width: 100%;
    height: 100%;
    padding: 70px 1px 10px 1px;
    // padding: 0;
    // padding-top: 70px;
    // padding-bottom: 5px;
    border-radius: var(--v-r-b);
    overflow: auto;
    overflow-y: hidden;
}
.v-nav-center-body.has-doc-lib {
    padding-bottom: 85px;
}

.v-toc-catalog-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-y: scroll;
}
.v-toc-catalog-body::after {
    content: attr(d-catalog-empty);
    color: var(--d-f-c-alt);
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
}
.v-toc-catalog-body:not(:empty)::after {
    content: "";
}

.v-nav-center-footer {
    height: 30px;
    line-height: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    padding: 0;
    background: linear-gradient(0deg, var(--pn-c) 10px, var(--pn-c-tsp));
    border-bottom-right-radius: var(--v-r-b);
    border-bottom-left-radius: var(--v-r-b);
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.v-nav-center-footer.has-doc-lib {
    bottom: 76px;
    border-radius: 0;
}

.v-toc-handle {
    position: fixed;
    display: none;
    top: 390px;
    left: 8px;
    width: 4px;
    height: 80px;
    background: var(--tbl-bder);
    border-radius: 2px;
    z-index: 2000;
}
.v-toc-handle.hover {
    background: var(--d-f-c);
}

body.typora-export .v-copyright {
    left: 0;
    bottom: 0;
    text-align: center;
    // color: #FFFFFF !important;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font: normal 0.875em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-subtitle);
    position: absolute;
    color: #FFFFFF !important;
    border: none;
    // border-bottom: @aBorderWidth solid #FFFFFF;
    // text-shadow: none;
    // text-decoration: none;
}
// body.typora-export .v-copyright,
body.typora-export .v-copyright a {
    color: #FFFFFF !important;
    border-bottom: @aBorderWidth solid #FFFFFF;
    text-shadow: none;
    text-decoration: none;
}
body.typora-export .v-copyright a:hover {
    box-shadow: 0 -0.3em 0 0 rgba(255, 255, 255, 0.3) inset;
}
body.typora-export .v-copyright a:active {
    background: #000000;
    border-radius: var(--v-r-s);
    border-bottom: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    transition: none;
}

.v-float-card {
    box-shadow: var(--v-float-shadow), @contrastBorder;
}

.v-foot-note-panel {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: 90px;
    height: 200px;
    border-radius: var(--v-r-b);
    box-shadow: var(--v-float-shadow);
    margin: 0 auto;
    background: var(--pn-c);
    // visibility: hidden;
    // opacity: 0;
    display: none;
    z-index: 2100;
}

body.typora-export .v-foot-note-panel > a {
    color: var(--d-f-c);
    text-decoration: none;
}

.v-foot-note-panel-header {
    height: 30px;
    top: 2px;
    left: 2px;
    right: 2px;
    position: absolute;
    background: linear-gradient(180deg, var(--pn-c) 5px, var(--pn-c-tsp));
    border-radius: var(--v-r-b);
}

.v-foot-note-panel-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

.v-foot-note-panel-all {
    font-weight: var(--v-f-w-bd);
    height: 60px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    line-height: 70px;
    bottom: 0;
    padding: 0 20px;
    margin: 2px;
    border-radius: var(--v-r-b);
    background: linear-gradient(0deg, var(--pn-c) 35px, var(--pn-c-tsp));
    position: absolute;
}

.v-more-doc-content-before {
    width: 100%;
    height: 110px;
    background: linear-gradient(180deg, var(--d-bc) 45%, var(--d-bc-tsp));
    position: fixed;
    top: 0;
    pointer-events: none;
    display: none;
    z-index: 99;
}
.v-more-doc-content-before.cover{
    top: 0;
    height: 60px;
    background: linear-gradient(180deg, var(--d-bc), var(--d-bc-tsp));
}
.v-more-doc-content-after {
    width: 100%;
    height: 60px;
    background: linear-gradient(0deg, var(--d-bc), var(--d-bc-tsp));
    position: fixed;
    bottom: 0;
    pointer-events: none;
    display: block;
    z-index: 99;
}

.v-toolbar {
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    left: 20px;
    top: 10px;
    padding: 10px;
    width: var(--v-nav-center-width);
    height: 50px;
    position: fixed;
    background: @buttonBgColor;
    display: none;
    z-index: 100;
}
.v-toolbar.cover {
    width: auto;
    right: 20px;
    background: none;
}

.v-toolbar-spliter {
    display: flex;
    width: 40px;
    height: 30px;
    padding: 0;
    float: right;
}

.v-toolbar-smallscreen {
    top: 50px;
    padding-left: 0;
    padding-right: 0;
}

// 用于替代默认的样式，但不设置 ::before
.v-toc-item,
.md-toc-item {
    color: var(--d-f-c);
    font: normal 1em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-size: 1em;
    // font-family: var(--v-f-fm-subtitle);
    margin: 0 10px;
    // margin-left: 10px;
    // margin-right: 10px;
    // margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    border-radius: var(--v-r-s);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.v-toc-item {
    white-space: normal;
    line-height: @defaultLineHeight;
    padding: 5px;
    margin-bottom: 5px;
    display: block;
}
.md-toc-item::before {
    color: var(--toc-h-num-color);
    padding-left: 5px;
}
.v-toc-item:hover,
.md-toc-item:hover {
    background: var(--pn-c-alt);
}
.v-toc-item:active,
.md-toc-item:active {
    color: var(--d-bc);
    background: var(--d-f-c-alt);
    box-shadow: 0 0 0 2px var(--tbl-bder);
    transition: none;
}
.v-toc-item:active::before,
.md-toc-item:active::before {
    color: var(--d-bc);
    // jQuery 选择器无法选择 ::before，所以须直接指定
    // transition: var(--v-trans-value);
}
.v-toc-item:active > span {
    color: var(--d-bc);
}
.v-toc-item:active svg > use,
.md-toc-item:active svg > use {
    fill: var(--d-bc);
}

.v-toc-item > span, // 目录大纲搜索结果的自动编号
.v-cap-1 > span {  // 题注前缀
    color: var(--d-f-c-alt);
    font-size: 0.85em;
}

.md-toc,
.v-toc {
    margin-top: 20px;
    margin-bottom: 0.5em;
    border-radius: 0;
    font-size: 1em;
    line-height: 2;
}

#write .md-toc-item a {
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: 0;
}

#write .md-toc-item a:hover {
    //, .md-toc-h6 a:hover
    color: var(--d-f-c) !important;
    box-shadow: none;
    text-decoration: none;
    border: 0;
}

.v-toc-item-current {
    font-weight: var(--v-f-w-title);
    background: var(--blockquote-bg);
    box-shadow: 0 0 0 2px fade(@headerColor, 50%) inset;
}

.v-toc-folder {
    // color: @docTextColorLightAlt;
    float: left;
    width: 20px;
    text-align: center;
}

.v-toc-folder.hover > svg > use {
    fill: @aHoverColor !important;
}
.v-toc-folder.hover:active > svg > use {
    fill: @buttonForeColor !important;
}

.v-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
    width: var(--v-toolbar-btn-width);
    height: 30px;
    border-radius: var(--v-r-s);
}

// 按钮 pin 状态
.v-btn.selected {
    background: darken(@buttonBgColor, 20%) !important;
    box-shadow: @contrastBorder;
}

.v-btn.first {
    border-radius: var(--v-r-si) 0 0 var(--v-r-si) !important;
}
.v-btn.middle {
    border-radius: 0 !important;
}
.v-btn.last {
    border-radius: 0 var(--v-r-si) var(--v-r-si) 0 !important;
}

.v-btn.hover {
    background: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

.v-btn.hover > svg > use {
    fill: @buttonForeHoverColor;
}

.v-btn.float,
.v-btn-group.float {
    background: @buttonBgColor;
}

.v-btn:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
    z-index: 1;
}

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.v-audio-mini-control.loading {
    animation: loading-circle 2s linear infinite;
}

.v-audio-mini-control {
    // color: @buttonForeColor;
    background: @buttonBgColor;
    border-radius: var(--v-r-c);
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    // box-shadow: 0 0 1px fade(@buttonForeHoverColor, 70%);
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    display: inline-flex;
    cursor: pointer;
}

.v-audio-mini-control.disabled {
    background: #B0B4B8;
    cursor: not-allowed;
}

.v-audio-mini-control.hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    color: @buttonForeHoverColor;
}

.v-audio-mini-control.hover:active {
    background: @aActiveColor;
}

.v-duration-info {
    color: var(--d-bc);
    border-radius: 0 var(--v-r-tag) var(--v-r-tag) var(--v-r-tag);
    padding: 0 5px;
    background: var(--d-f-c-alt);
    font-weight: bold;
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.v-audio-mini-control.playing {
    animation: 500ms breathe-circle infinite alternate;
}

.v-chapter-nav {
    color: @buttonForeColor;
    background: @buttonBgColor;
    border-bottom-left-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    top: -50px;
    left: calc(~"var(--v-nav-center-width) + 50px");
    right: 20px;
    height: 50px;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
}

.v-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-prev.noeffect.hover {
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    // text-shadow: @floatShadow;
    border-bottom-left-radius: var(--v-r-b);
}
.v-chapter-nav-prev.effect.hover > svg > use,
.v-chapter-nav-prev.noeffect.hover > svg > use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-prev.effect.hover > .v-chapter-nav-prev-text,
.v-chapter-nav-prev.noeffect.hover > .v-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    border-bottom-left-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-in;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-prev.noeffect:active,
.v-chapter-nav-prev.effect:active,
.v-chapter-nav-prev.effect:active::before {
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-prev-text {
    top: 0;
    left: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // line-height: 50px;
    // font-family: var(--v-f-fm-subtitle);
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    display: block;
}

.v-chapter-nav-doc-title {
    font: normal 0.75em/24px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-size: 0.75em;
    // line-height: 24px;
    // font-family: var(--v-f-fm-subtitle);
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 22px !important;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-doc-title.in-start {
    margin-left: 15px;
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
    line-height: 50px;
    text-align: left;
    height: 50px !important;
    cursor: default;
}

.v-chapter-nav-current {
    font: var(--v-f-w-title) 1em/22px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // line-height: 22px;
    // font-family: var(--v-f-fm-subtitle);
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    padding-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 28px;
    cursor: pointer;
    display: block;
}
.v-chapter-nav-current > span {
    opacity: 0.75;
}
.v-chapter-nav-doc-title.effect.hover,
.v-chapter-nav-current.effect.hover {
    color: @buttonForeHoverColor;
}

// 无特效（effect=0）时使用的样式
.v-chapter-nav-doc-title.noeffect.hover,
.v-chapter-nav-current.noeffect.hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    height: 28px;
    color: @buttonForeHoverColor;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect::before,
.v-chapter-nav-current.effect::before {
    content: attr(d-header-num);
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 28px;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-in;
}
.v-chapter-nav-doc-title.effect::before {
    top: 0;
    height: 22px;
}

// 有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.effect.hover::before,
.v-chapter-nav-current.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-doc-title.noeffect:active,
.v-chapter-nav-doc-title.effect:active,
.v-chapter-nav-doc-title.effect:active::before,
.v-chapter-nav-current.noeffect:active,
.v-chapter-nav-current.effect:active,
.v-chapter-nav-current.effect:active::before {
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
}

.v-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: var(--v-r-b);
}
// 无特效（effect=0）时使用的样式
.v-chapter-nav-next.noeffect.hover {
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    // text-shadow: @floatShadow;
    border-bottom-right-radius: var(--v-r-b);
}
.v-chapter-nav-next.effect.hover > svg > use,
.v-chapter-nav-next.noeffect.hover > svg > use {
    fill: @buttonForeHoverColor;
}
.v-chapter-nav-next.noeffect.hover > .v-chapter-nav-next-text,
.v-chapter-nav-next.effect.hover > .v-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    // border-top-right-radius: var(--v-r-b);
    border-bottom-right-radius: var(--v-r-b);
    opacity: 0;
    z-index: -1;
    transition: all var(--v-trans-dur) ease-in;
}
// 有特效（effect>=1）时使用的样式
.v-chapter-nav-next.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.v-chapter-nav-next.noeffect:active,
.v-chapter-nav-next.effect:active,
.v-chapter-nav-next.effect:active::before {
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.v-chapter-nav-next-text {
    top: 0;
    right: 40px;
    width: 100%;
    height: 50px;
    font: normal 1em/50px var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // line-height: 50px;
    // font-family: var(--v-f-fm-subtitle);
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    display: block;
}

.v-btn.color-scheme {
    margin-left: var(--v-toolbar-btn-space);
    float: right;
}

.v-btn.font-theme {
    margin-left: var(--v-toolbar-btn-space);
    float: right;
}

.v-btn-group.prs {
    margin: 0;
    height: 30px;
    float: right;
    border-radius: var(--v-r-s);
    margin-left: var(--v-toolbar-btn-space);
}

.v-btn-group.hover {
    background: darken(@buttonBgColor, 6%);
    box-shadow: @contrastBorder;
}

// 辅助类按钮
.v-accent-btn {
    width: 40px;
    height: 30px;
    position: absolute;
    text-align: center;
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    cursor: pointer;
}

.v-accent-btn > svg > use {
    fill: @buttonBgColor;
}

.v-accent-btn.hover {
    background: var(--pn-c-alt);
}

.v-accent-btn:active {
    color: var(--d-bc);
    background: var(--pn-c-alt);
    box-shadow: 0 0 0 2px var(--tbl-bder);
}
.v-accent-btn:active > svg > use {
    fill: var(--d-bc);
}

.v-accent-btn + .v-textfield {
  margin: 0 10px 0 0;
}

.v-accent-btn.figure-nav.disabled {
    cursor:not-allowed;
}
.v-accent-btn.figure-nav.disabled > svg > use {
    fill: var(--pn-c-alt);
}

.v-search-by-keyword {
    display: block;
    margin: 10px;
}

.v-focus-search.actived {
    filter: grayscale(50%) opacity(0.5) !important;
}

// 输入框
.v-textfield {
    background: var(--d-bc);
    border-radius: var(--v-r-s);
    box-shadow: var(--v-float-inn-shadow);
    margin: 0;
    height: 30px;
}
// 注意 box-shadow 如有多段，且使用动画变换样式
// 须保持内、外阴影样式设置的顺序要一致，否则动画变换会失效
.v-textfield-focus,
.v-textfield.hover-action {
    box-shadow: 0 0 0 1px @buttonBgColor inset, 0 0 0 2px fade(@buttonBgColor, 50%);
}

body.typora-export input::placeholder,
body.typora-export input:focus::placeholder {
    color: var(--d-f-c-alt);
    font-weight: normal;
}

// 输入框内的输入控件
.v-textfield > input {
    padding: 0;
    margin: 1px 0 0 10px;
    height: 28px;
    color: @aHoverColor;
    font-weight: var(--v-f-w-bd);
    // color: var(--d-f-c);
    background: var(--d-bc);
    border: 0;
    float: left;
    outline: 0 solid transparent;
    caret-color: @aHoverColor;
}
.v-textfield > input.set-icon {
    margin-left: 0;
}

.v-textfield-icon {
    width: 30px;
    height: 30px;
    padding: 5px;
    text-align: center;
    float: left;
}

// 输入框内的动作按钮
.v-textfield-action {
    width: 40px;
    height: 30px;
    text-align: center;
    border-radius: 0 var(--v-r-s) var(--v-r-s) 0;
    box-shadow: 1px 0 0 0 var(--pn-c-alt) inset;
    float: right;
}
.v-textfield-action.enabled {
    background: @buttonBgColor;
    box-shadow: none;
}
.v-textfield-action.enabled > svg > use {
  fill: @buttonForeColor;
  opacity: 1;
}
.v-textfield-action.hover {
    background: @aHoverColor;
    cursor: pointer;
}
.v-textfield-action.hover > svg > use {
    fill: @buttonForeHoverColor;
}
.v-textfield-action.hover:active {
    background: @aActiveColor;
}

.v-textfield-reset {
    width: 30px;
    height: 30px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    float: right;
    display: none;
    cursor: pointer;
}
.v-textfield-reset:hover > svg > use {
    opacity: 0.4;
}
.v-textfield-reset:active > svg > use {
    opacity: 0.6;
}

// tab 栏内按钮
.v-accent-btn.figure-nav {
    display: inline-block;
    margin: 0 10px 10px 10px;
}

.v-toc-filter-result,
.v-toc-history-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0 10px 0;
    overflow-y: scroll;
}
.v-toc-history-result {
    padding-top: 60px;
}

.v-toc-history-none,
.v-toc-filter-result-none {
    display: block;
    padding: 0 10px;
    text-align: center;
    color: var(--d-f-c-alt);
    font: normal 1em/3 var(--v-f-fm-text); // [style] [weight] [size/[line-height]] [family]
    // line-height: 3;
    // font-family: var(--v-f-fm-text);
}

.v-toc-history-title {
    text-align: center;
    position: absolute;
    border-radius: var(--v-r-s);
    left: 10px;
    right: 10px;
    // width: 336px !important;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    // font: normal 1em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    font-family: var(--v-f-fm-subtitle);
    color: var(--d-f-c-alt);
}

.v-btn.nav-center {
    float: left;
}

.v-btn.print {
    margin-left: var(--v-toolbar-btn-space);
    float: left;
}

.v-fig-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // background: rgba(0, 0, 0, 0.6);
    // background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
    position: fixed;
    visibility: hidden;
    opacity: 0;
    user-select: none;
    z-index: 2200;
}

// 插图导航中的导航按钮
.v-fig-nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
}
// 插图导航中的上一插图按钮
.v-fig-nav-btns.prev {
    left: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}
// 插图导航中的下一插图按钮
.v-fig-nav-btns.next {
    right: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--v-r-b);
    position: absolute;
    bottom: 10px;
}

.v-btn-close-figure-nav {
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    align-items: normal;
    color: #FFFFFF;
    cursor: pointer;
    background: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
}

.v-btn-close-figure-nav:hover {
    background: @aHoverColor;
    box-shadow: var(--v-float-shadow);
    transform: translate(-2px, 2px) ;
}

.v-btn-close-figure-nav:active {
    background: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    box-shadow: none;
    transform: none;
}

.v-content-assistor {
    // display: none;
    visibility: hidden;
    opacity: 1;
    position: absolute;
    border-radius: var(--v-r-si);
    height: 26px;
    z-index: 50;
}

.v-btn.assistor {
    top: 0;
    width: 30px;
    height: 26px;
    border-radius: 0;//var(--v-r-si);
    background: @buttonBgColor;
    position: relative;
    display: none;
}
.v-btn.assistor.enabled {
    display: inline-flex;
}

.v-pic-in-pic {
    display: none;
    position: fixed;
    background: var(--h-f);
    border-radius: calc(var(--v-r-b) + var(--v-r-b) - var(--v-r-t));
    right: 20px;
    bottom: 10px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 500;
}
.v-pic-in-pic > .v-content {
    overflow: auto;
    height: 100%;
    border-radius: calc(var(--v-r-b) - 2px);
}
.v-pic-in-pic > .v-content > table,
.v-pic-in-pic > .v-content > .v-fig {
    border-radius: calc(var(--v-r-b) - 2px) !important;
}
.v-pic-in-pic > .v-content > table th,
.v-pic-in-pic > .v-content > table td {
    white-space: pre !important;
}

.v-pip-btn {
    position: absolute;
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    background: var(--d-bc);
    border-radius: 50%;
    top: 8px;
    // width: 24px;
    // height: 24px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 20;
}
.v-pip-btn.min.zoom-in {
    top: 6px;
}
.v-pip-btn.min.zoom-out {
    top: 3px;
}

.v-pip-btn.v-close {
    right: 8px;
}

.v-pip-btn.v-zoom.zoom-in {
    right: 32px;
}
.v-pip-btn.v-zoom.zoom-out {
    right: 38px;
}

.v-pip-btn.zoom-in {
    width: 20px;
    height: 20px;
}
.v-pip-btn.zoom-out {
    width: 26px;
    height: 26px;
}

.v-pip-btn.zoom-in > svg {
    transform: scale(1);
}
.v-pip-btn.zoom-out > svg {
    transform: scale(1.33);
}
.v-pip-btn:hover > svg > use {
    fill: @aHoverColor;
}
.v-pip-btn:active > svg > use {
    fill: @aActiveColor;
}

// 文档抽屉面板
.v-doc-lib-board {
    display: none;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 50px;
    position: absolute;
    z-index: 20;
}

// 文档抽屉面板下的按钮
.v-doc-lib-board > .item {
    border-radius: var(--v-r-s);
    color: @buttonForeColor;
    background: @buttonBgColor;
    background-image: url("");
    background-position: top center;
    background-repeat: no-repeat;
    font: var(--v-f-w-bd) 1.25em/@defaultLineHeight var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 1.25em;
    // line-height: @defaultLineHeight;
    // font-family: var(--v-f-fm-subtitle);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 12px 10px 0px;
    position: absolute;
    display: block;
    width: 100%;
    height: 50px;
    cursor: pointer;
    z-index: 23;
}
// 文档抽屉面板下的文档条
.v-doc-lib-board > .flip {
    left: 70px;
    right: 70px;
    bottom: 58px;
    height: 4px;
    position: absolute;
    background: var(--d-f-c);
    opacity: 0.18;
    border-radius: calc(var(--v-r-s) - 3px) calc(var(--v-r-s) - 3px) 0 0;
    z-index: 21;
}
.v-doc-lib-board > .flip + .flip {
    left: 40px;
    right: 40px;
    bottom: 51px;
    height: 6px;
    background: var(--d-f-c);
    opacity: 0.3;
    border-radius: calc(var(--v-r-s) - 1px) calc(var(--v-r-s) - 1px) 0 0;
    z-index: 22;
}
// hover
.v-doc-lib-board.item.hover {
    background: @aHoverColor;
    color: @buttonForeHoverColor;
}
.v-doc-lib-board.item.hover + .flip {
    left: 50px;
    right: 50px;
    bottom: 76px;
    height: 8px;
    border-radius: calc(var(--v-r-s) - 2px) calc(var(--v-r-s) - 2px) 0 0;
}
.v-doc-lib-board.item.hover + .flip + .flip {
    left: 30px;
    right: 30px;
    bottom: 62px;
    height: 12px;
    border-radius: calc(var(--v-r-s) - 1px) calc(var(--v-r-s) - 1px) 0 0;
}
// active
.v-doc-lib-board.item:active {
    background: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
}

// 文档抽屉
.v-doc-lib {
    display: none;
    // opacity: 0;
    // visibility: hidden;
    background: var(--d-bc);
    box-shadow: 0 0 0 2px var(--tbl-bder);
    margin: 0;
    border: none;
    border-radius: var(--v-r-b);
    overflow: auto;
    position: fixed;
    left: 15%;
    top: 10%;
    right: 15%;
    bottom: 15%;
    z-index: 5000;
}
.v-doc-lib > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: auto;
}

// .md-diagram-panel {
//     border-radius: var(--v-r-b);
//     margin-bottom: 20px;
//     padding: 0;
// }

.v-interactive {
    cursor: pointer;
}
.v-interactive.hover {
    border-color: @aHoverColor !important;
}
.v-interactive.hover:active {
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}
.v-interactive.hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.v-img-invert-dark {
    background-color: #FFFFFF !important;
    filter: var(--v-invert-dk);
    border-color: var(--img-bder-invert) !important;
}

// Light 模式的插图网格背景
.v-fig-solid-bg-light {
    background: @figureSolidBgLight;
}
.v-fig-grid-line-light {
    background: var(--v-fig-grid-l-lg) !important;
    // background: url(@figureGridLineLight) !important;
}
.v-fig-grid-block-light {
    background: var(--v-fig-grid-b-lg) !important;
    // background: url(@figureGridBlockLight) !important;
}

// Dark Mode 的插图网格背景
.v-fig-solid-bg-dark {
    background-color: @figureSolidBgDark;
}
.v-fig-grid-line-dark {
    background: var(--v-fig-grid-l-dk) !important;
}
.v-fig-grid-line-dark-invert {
    background: var(--v-fig-grid-l-invert) !important;
}
.v-fig-grid-block-dark {
    background: var(--v-fig-grid-b-dk) !important;
}
.v-fig-grid-block-dark-invert {
    background: var(--v-fig-grid-b-invert) !important;
}

.v-fig-content {
    margin: 5px;
    padding: 5px;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--d-f-c);
}

.v-fig-nav-title {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.v-fig-page-num {
    border-radius: var(--v-r-s);
    color: #FFFFFF;
    background: var(--d-f-c-alt);
    padding-left: 4px;
    padding-right: 4px;
    font: normal 0.875em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-bd);
}

.v-caption {
    display: inline-block;
    border-radius: var(--v-r-b);
    background: var(--tbl-td-bg);
    // background: var(--d-bc-alt);
    // overflow-y: hidden;
    // margin-top: 1em;
}

.v-cap-1,
.v-cap-2 {
    color: var(--d-f-c);
    font: normal 0.875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-tag);
    font-weight: normal;
    margin: 5px 10px !important;
    width: auto !important;
}

.v-cap-cntr {
    border-radius: var(--v-r-b);
    margin-bottom: @paragraphPadding;
    // margin-bottom: 20px;
}

// 用于折叠类、表格列格式复选框的小图标
.v-svg-small-ico {
    display: inline-block;
    // vertical-align: text-top;
    // vertical-align: middle;
    // margin-top: -4px;
}
.v-svg-input-checkbox {
    position: absolute;
    margin-top: 0.6em;
    display: inline-block;
    vertical-align: middle;
}

use.v-svg-ico-light {
    fill: @buttonForeColor;
}

use.v-svg-ico-dark {
    fill: var(--d-f-c);
}

use.v-svg-ico-alpha {
    fill: var(--d-f-c);
    opacity: 0.2;
}

use.v-svg-ico-theme {
    fill: var(--h-f);
}

use.v-svg-ico-alt {
    fill: var(--d-f-c-alt);
}

// 折叠按钮样式
use.v-toc-folder-ico,
use.v-rowgroup-folder-ico,
use.v-blockquote-folder-ico {
    fill: var(--h-f);
}

use.v-blockquote-folder-ico:active {
    fill: @aActiveColor;
}

// 遮罩样式
.v-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    // visibility: hidden;
    // opacity: 0;
    display: none;
    z-index: 1000;
}
// 遮罩扩展样式
.v-mask.left {
    // background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(90deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.right {
    // background: linear-gradient(270deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(270deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.bottom {
    // background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(0deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.v-mask.center {
    // background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
    background: radial-gradient(ellipse, @themeBgColorDark 10%, fade(@themeBgColorDark, 50%));
}

// 遮罩关闭提示器样式
.v-mask-close {
    position: fixed;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    opacity: 0.7;
}
// 遮罩关闭提示器扩展样式
.v-mask-close.left {
    width: 16px;
    height: 60px;
}
.v-mask-close.right {
    width: 16px;
    height: 60px;
}
.v-mask-close.bottom {
    width: 60px;
    height: 16px;
}

.v-backdrop-blurs.enabled {
    // background: var(--backdrop-blurs-bg);
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
}

// 引用内的分栏引用
#write blockquote > hr + blockquote,
#write blockquote > hr + blockquote + blockquote,
#write blockquote > hr + blockquote + blockquote,
#write blockquote > hr + blockquote + blockquote + blockquote,
#write blockquote > hr + blockquote + blockquote + blockquote + blockquote,
#write blockquote > .md-hr + blockquote,
#write blockquote > .md-hr + blockquote + blockquote,
#write blockquote > .md-hr + blockquote + blockquote + blockquote,
#write blockquote > .md-hr + blockquote + blockquote + blockquote + blockquote {
// #write blockquote > .v-q {
    border: 0;
    background: var(--d-bc) !important;
    border-radius: var(--v-r-s);
    padding: 0.75em 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

// 彩虹引用
#write .v-q,
body.typora-export .v-q {
    color: var(--d-f-c);
    width: auto;
    border: none;
    border-radius: var(--v-r-b);
    padding: 0.75em 1em;
}
// 生成彩虹引用相关样式
.genRainbowQuoteCSS(@quoteMark, @accColor, @fadeColor, @lightColor, @altColor, @titleColor, @titleLightColor) {
    #write .v-q.@{quoteMark} {
        box-shadow: 0 0 0 4px @fadeColor inset;
        background: none !important;
    }
    // 强调样式
    #write .v-q.@{quoteMark}.em {
        box-shadow: none;
        background: @fadeColor !important;
    }
    // 代码
    #write .v-q.@{quoteMark} .v-std-code,
    #write .v-q .v-q.@{quoteMark} .v-std-code {
        background: @altColor;
    }
    // 折叠控件
    .v-q.@{quoteMark} .v-blockquote-folder > svg > use,
    .v-q.@{quoteMark} .v-svg-input-checkbox > use {
        fill: @lightColor;
    }
    // 按钮链接
    #write .v-q.@{quoteMark} a kbd,
    #write .v-q .v-q.@{quoteMark} a kbd {
        background: @lightColor;
        color: #FFFFFF;
    }
    #write .v-q.@{quoteMark} a kbd:hover,
    #write .v-q .v-q.@{quoteMark} a kbd:hover {
        background: @aHoverColor;
        color: @buttonForeHoverColor;
    }
    // 链接
    #write .v-q.@{quoteMark} a,
    #write .v-q .v-q.@{quoteMark} a {
        color: @lightColor !important;
    }
    #write .v-q.@{quoteMark} a:hover,
    #write .v-q .v-q.@{quoteMark} a:hover {
        color: var(--d-f-c) !important;
        box-shadow: 0 -0.3em 0 0 rgba(@accColor, 0.3) inset;
    }
    #write .v-q.@{quoteMark} a:active,
    #write .v-q .v-q.@{quoteMark} a:active {
        background: var(--pn-c);
        box-shadow: 0 0 0 2px rgba(@accColor, 0.3);
        border-bottom: 0;
        border-radius: var(--v-r-s);
    }
    // 标题
    #write .v-q > .title-@{quoteMark},
    #write .v-q .v-q > .title-@{quoteMark} {
        color: @titleLightColor;
    }
    // 强调标题
    #write .v-q > .title-@{quoteMark}.em,
    #write .v-q .v-q > .title-@{quoteMark}.em {
        color: @titleColor;
    }
    // 列表符号
    #write .v-q.@{quoteMark} ::marker,
    #write .v-q.@{quoteMark} li::before {
        color: @accColor;
    }
    // 代码行号
    #write .v-q.@{quoteMark} .CodeMirror-linenumber {
        color: @accColor;
    }
}
.genRainbowQuoteCSS(red, @accColorRed, var(--ac-red-fade), var(--ac-red-lg), var(--ac-red-alt), var(--ac-red-title), var(--ac-red-title-lg));
.genRainbowQuoteCSS(orange, @accColorOrange, var(--ac-orange-fade), var(--ac-orange-lg), var(--ac-orange-alt), var(--ac-orange-title), var(--ac-orange-title-lg));
.genRainbowQuoteCSS(yellow, @accColorYellow, var(--ac-yellow-fade), var(--ac-yellow-lg), var(--ac-yellow-alt), var(--ac-yellow-title), var(--ac-yellow-title-lg));
.genRainbowQuoteCSS(lime, @accColorLime, var(--ac-lime-fade), var(--ac-lime-lg), var(--ac-lime-alt), var(--ac-lime-title), var(--ac-lime-title-lg));
.genRainbowQuoteCSS(green, @accColorGreen, var(--ac-green-fade), var(--ac-green-lg), var(--ac-green-alt), var(--ac-green-title), var(--ac-green-title-lg));
.genRainbowQuoteCSS(aqua, @accColorAqua, var(--ac-aqua-fade), var(--ac-aqua-lg), var(--ac-aqua-alt), var(--ac-aqua-title), var(--ac-aqua-title-lg));
.genRainbowQuoteCSS(cyan, @accColorCyan, var(--ac-cyan-fade), var(--ac-cyan-lg), var(--ac-cyan-alt), var(--ac-cyan-title), var(--ac-cyan-title-lg));
.genRainbowQuoteCSS(blue, @accColorBlue, var(--ac-blue-fade), var(--ac-blue-lg), var(--ac-blue-alt), var(--ac-blue-title), var(--ac-blue-title-lg));
.genRainbowQuoteCSS(sea, @accColorSea, var(--ac-sea-fade), var(--ac-sea-lg), var(--ac-sea-alt), var(--ac-sea-title), var(--ac-sea-title-lg));
.genRainbowQuoteCSS(steel, @accColorSteel, var(--ac-steel-fade), var(--ac-steel-lg), var(--ac-steel-alt), var(--ac-steel-title), var(--ac-steel-title-lg));
.genRainbowQuoteCSS(purple, @accColorPurple, var(--ac-purple-fade), var(--ac-purple-lg), var(--ac-purple-alt), var(--ac-purple-title), var(--ac-purple-title-lg));
.genRainbowQuoteCSS(rose, @accColorRose, var(--ac-rose-fade), var(--ac-rose-lg), var(--ac-rose-alt), var(--ac-rose-title), var(--ac-rose-title-lg));
.genRainbowQuoteCSS(pink, @accColorPink, var(--ac-pink-fade), var(--ac-pink-lg), var(--ac-pink-alt), var(--ac-pink-title), var(--ac-pink-title-lg));
.genRainbowQuoteCSS(gold, @accColorGold, var(--ac-gold-fade), var(--ac-gold-lg), var(--ac-gold-alt), var(--ac-gold-title), var(--ac-gold-title-lg));
.genRainbowQuoteCSS(brown, @accColorBrown, var(--ac-brown-fade), var(--ac-brown-lg), var(--ac-brown-alt), var(--ac-brown-title), var(--ac-brown-title-lg));
.genRainbowQuoteCSS(gray, @accColorGray, var(--ac-gray-fade), var(--ac-gray-lg), var(--ac-gray-alt), var(--ac-gray-title), var(--ac-gray-title-lg));
.genRainbowQuoteCSS(theme1, @theme1, var(--ac-theme1-fade), var(--ac-theme1-lg), var(--ac-theme1-alt), var(--ac-theme1-title), var(--ac-theme1-title-lg));
.genRainbowQuoteCSS(theme2, @theme2, var(--ac-theme2-fade), var(--ac-theme2-lg), var(--ac-theme2-alt), var(--ac-theme2-title), var(--ac-theme2-title-lg));

// 标签式公用样式（风格2）
// .v-tag {
#write .v-tag,
body.typora-export .v-tag {
    font: var(--v-f-w-bd) 0.875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-tag);
    color: fade(#FFFFFF, 90%);
    border-radius: 1em;//var(--v-r-tag);
    text-shadow: none;
    padding: 2px 5px;
    // padding: 2px 0.5em;
    // margin: 0 0.1em;
    white-space: pre;
    box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
    // cursor: pointer;
    cursor: var(--cur-copy);
}
.v-tag.hover {
    filter: brightness(1.1);
}
.v-tag::before,
.v-tag::after {
    content: "#";
    opacity: 0.5;
    font-weight: normal;
}

// 生成彩虹引用相关样式
.genRainbowTagCSS(@tagMark, @tagColor, @bgColorStyle) when (@bgColorStyle = deep) {
    .v-tag.@{tagMark} {
        background: @tagColor;
        // background: linear-gradient(90deg, var(--d-f-c) 0.25em, @tagColor 0.25em, @tagColor 100%);
    }
}
.genRainbowTagCSS(@tagMark, @tagColor, @bgColorStyle) when (@bgColorStyle = light) {
    .v-tag.@{tagMark} {
        color: var(--d-f-c) !important;
        background: @tagColor;
        // background: linear-gradient(90deg, var(--d-f-c) 0.25em, @tagColor 0.25em, @tagColor 100%);
    }
}
.genRainbowTagCSS(@tagMark, @tagColor, @bgColorStyle) when (@bgColorStyle = black) {
    .v-tag.@{tagMark} {
        color: var(--d-bc) !important;
        background: @tagColor;
        // background: linear-gradient(90deg, var(--d-f-c) 0.25em, @tagColor 0.25em, @tagColor 100%);
    }
}
.genRainbowTagCSS(red, var(--ac-red), deep);
.genRainbowTagCSS(orange, var(--ac-orange), deep);
.genRainbowTagCSS(yellow, var(--ac-yellow), light);
.genRainbowTagCSS(lime, var(--ac-lime), light);
.genRainbowTagCSS(green, var(--ac-green), deep);
.genRainbowTagCSS(aqua, var(--ac-aqua), light);
.genRainbowTagCSS(cyan, var(--ac-cyan), deep);
.genRainbowTagCSS(blue, var(--ac-blue), deep);
.genRainbowTagCSS(sea, var(--ac-sea), deep);
.genRainbowTagCSS(steel, var(--ac-steel), deep);
.genRainbowTagCSS(purple, var(--ac-purple), deep);
.genRainbowTagCSS(rose, var(--ac-rose), deep);
.genRainbowTagCSS(pink, var(--ac-pink), light);
.genRainbowTagCSS(gold, var(--ac-gold), light);
.genRainbowTagCSS(brown, var(--ac-brown), deep);
.genRainbowTagCSS(gray, var(--ac-gray), deep);
.genRainbowTagCSS(black, var(--d-f-c), black);
.genRainbowTagCSS(theme1, var(--ac-theme1), deep);
.genRainbowTagCSS(theme2, var(--ac-theme2), deep);

// 徽章样式名称公共样式
// .v-badge-name {
#write .v-badge-name,
body.typora-export .v-badge-name {
    display: inline-block;
    font: var(--v-f-w-bd) 0.875em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 0.875em;
    // font-family: var(--v-f-fm-tag);
    margin-right: 0;
    border-radius: var(--v-r-tag);
    color: fade(#FFFFFF, 90%);
    padding: 2px 2px 2px 0.5em;
    white-space: pre;
    box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
    // cursor: pointer;
    cursor: var(--cur-copy);
}
.v-badge-name.hover {
    filter: brightness(1.1);
}

// 表格内的情况
#write table code,
body.typora-export table code,
// table .v-badge-name {
#write table .v-badge-name,
body.typora-export table .v-badge-name {
    display: inline-block;
    margin: 1px 0;
}
#write table .v-badge-name,
body.typora-export table .v-badge-name {
    padding: 3px 3px 3px .5em;
}

// 徽章样式内容公共样式
.v-badge-value {
    display: inline-block;
    font: var(--v-f-w-bd) 1em var(--v-f-fm-tag); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 1em;
    // font-family: var(--v-f-fm-tag);
    border-radius: calc(var(--v-r-tag) - 2px);
    opacity: 0.9;
    color: var(--d-f-c) !important;
    background: var(--d-bc) !important;
    padding: 0 0.5em;
    margin: 1px 1px 1px 0.5em;
    white-space: pre;
    // cursor: pointer;
    cursor: var(--cur-copy);
}
.v-badge-value.hover {
    filter: brightness(1.1);
}

// 表格内的情况
// table .v-badge-value {
#write table .v-badge-value,
body.typora-export table .v-badge-value {
    display: inline-block;
    margin: 0 0 0 0.5em;
}
.v-badge-value > span.var {
    font-style: italic;
}

// 生成彩虹徽章相关样式
.genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = deep) {
    .v-badge-name.@{badgeMark} {
        background: @badgeColor;
    }
    .v-badge-value.@{badgeMark},
    .v-badge-value > span.var.@{badgeMark} {
        color: @badgeVarColor !important;
    }
}
.genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = light) {
    .v-badge-name.@{badgeMark} {
        color: var(--d-f-c) !important;
        background: @badgeColor;
    }
    .v-badge-value.@{badgeMark},
    .v-badge-value > span.var.@{badgeMark} {
        color: @badgeVarColor !important;
    }
}
.genRainbowBadgeCSS(@badgeMark, @badgeColor, @badgeVarColor,  @bgColorStyle) when (@bgColorStyle = black) {
    .v-badge-name.@{badgeMark} {
        color: var(--d-bc) !important;
        background: @badgeColor;
    }
    .v-badge-value.@{badgeMark} {
        color: var(--d-f-c) !important;
    }
    .v-badge-value > span.var.@{badgeMark} {
        color: @badgeVarColor;
    }
}
.genRainbowBadgeCSS(red, var(--ac-red), var(--ac-red-lg), deep);
.genRainbowBadgeCSS(orange, var(--ac-orange), var(--ac-orange-lg), deep);
.genRainbowBadgeCSS(yellow, var(--ac-yellow), var(--ac-yellow-lg), light);
.genRainbowBadgeCSS(lime, var(--ac-lime), var(--ac-lime-lg), light);
.genRainbowBadgeCSS(green, var(--ac-green), var(--ac-green-lg), deep);
.genRainbowBadgeCSS(aqua, var(--ac-aqua), var(--ac-aqua-lg), light);
.genRainbowBadgeCSS(cyan, var(--ac-cyan), var(--ac-cyan-lg), deep);
.genRainbowBadgeCSS(blue, var(--ac-blue), var(--ac-blue-lg), deep);
.genRainbowBadgeCSS(sea, var(--ac-sea), var(--ac-sea-lg), deep);
.genRainbowBadgeCSS(steel, var(--ac-steel), var(--ac-steel-lg), deep);
.genRainbowBadgeCSS(purple, var(--ac-purple), var(--ac-purple-lg), deep);
.genRainbowBadgeCSS(rose, var(--ac-rose), var(--ac-rose-lg), deep);
.genRainbowBadgeCSS(pink, var(--ac-pink), var(--ac-pink-lg), light);
.genRainbowBadgeCSS(gold, var(--ac-gold), var(--ac-gold-lg), light);
.genRainbowBadgeCSS(brown, var(--ac-brown), var(--ac-brown-lg), deep);
.genRainbowBadgeCSS(gray, var(--ac-gray), var(--ac-theme2-lg), black);
.genRainbowBadgeCSS(black, var(--d-f-c), var(--ac-theme2-lg), black);
.genRainbowBadgeCSS(theme1, var(--ac-theme1), var(--ac-theme1-lg), deep);
.genRainbowBadgeCSS(theme2, var(--ac-theme2), var(--ac-theme2-lg), deep);

// 注音
rp,
rt {
    font: normal 0.5em var(--v-f-fm-bd); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal;
    // font-family: var(--v-f-fm-bd);
    opacity: 0.6;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
rt:hover {
    color: @aHoverColor;
    opacity: 1;
    // box-shadow: 0 -0.4em 0 0 fade(@aLineColor, 30%) inset;
    // border-bottom: @aBorderWidth solid fade(@aLineColor, 30%);
    transform-origin: center bottom;
    transform: scale(1.5);
    cursor: pointer;
}

// 黑幕
#write .v-rb-coat {
    text-shadow: 0px 1px var(--d-f-c);
    box-shadow: none;
    color: var(--d-bc);
    font: var(--v-f-w-bd) 1em var(--v-f-fm-code); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-size: 1em;
    // font-family: var(--v-f-fm-code) !important;
    cursor: pointer;
}
#write .v-rb-coat:hover {
    box-shadow: 0 0 0 1px @aLineColor, 0 2px 0 0 @aLineColor inset !important;
    display:inline-block;
    transform: scale(1.2);
}
#write .v-rb-coat.opened {
    box-shadow: 0 0 0 1px var(--d-f-c), 0 2px 0 0 var(--d-f-c) inset;
    background: var(--d-bc) !important;
    text-shadow: none;
}

// h6 内的 code 标签强制取消加粗
h6 code {
    font-weight: var(--v-f-w-text);
}

/**************************************
* 封面、封底
**************************************/

// 无标准封面时的封面样式
.v-doc-title {
    color: @headerColor;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // font-size: 2.5em;
    // line-height: 1.3 !important;
    // font-family: var(--v-f-fm-title);
    padding-top: 70px;
    opacity: 0.5;
}
.v-doc-title.mini {
    padding-top: 10px;
}

// 封面：#write 下 H6 作为第一个元素时
#write > pre.md-meta-block:first-child + h6, // 有 YAML 的情况
#write > h6:first-child, // 无 YAML 的情况
// 封底：#write 下 H6 作为最后一个元素时
#write > h1:last-child {
    display: block;
    color: @coverTextColor !important;
    font: var(--v-f-w-title) 2.5em/1.3 var(--v-f-fm-title); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-title);
    // font-size: 2.5em;
    // line-height: 1.3 !important;
    // font-family: var(--v-f-fm-title);
    text-align: @coverTextAlign;
    filter: var(--v-brightness-dk);
    height: 950px;//25cm;
    padding: @coverTextPadding;
    margin: 0 0 3em;
    border: 0;
    border-radius: var(--v-r-b);
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    letter-spacing: 0;
}

// 封底样式微调
#write > h1:last-child {
    height: 550px;//14cm;
    margin-top: 3em;
    margin-bottom: 0;
    // margin-bottom: 10px;
    padding: @backCoverTextPadding;
    color: @backCoverTextColor !important;
    text-align: @backCoverTextAlign;
    background-color: @backCoverBackgroundColor;
    background-image: @backCoverBackgroundImage;
    background-size: @backCoverBackgroundSize;
    background-repeat: @backCoverBackgroundRepeat;
    background-position: @backCoverBackgroundPosition;
    letter-spacing: 0;
}

// 封面内下标信息
#write > pre.md-meta-block:first-child + h6 sub,
#write > h6:first-child sub {
    color: @coverSubColor;
    font: var(--v-f-w-bd) 75% var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-subtitle);
}

// 封面内上标信息
#write > pre.md-meta-block:first-child + h6 sup,
#write > h6:first-child sup {
    color: @coverSupColor;
    font: var(--v-f-w-bd) 75% var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: var(--v-f-w-bd);
    // font-family: var(--v-f-fm-subtitle);
}

// 封面内密级信息
#write > pre.md-meta-block:first-child + h6 code,
#write > pre.md-meta-block:first-child + h6 .v-tag,
#write > pre.md-meta-block:first-child + h6 .v-badge-name,
#write > h6:first-child code,
#write > h6:first-child .v-tag,
#write > h6:first-child .v-badge-name {
    font-size: 0.5em !important;
    color: @buttonForeHoverColor;
    background: var(--ac-theme2);
    // box-shadow: 0 0 0 1px var(--rb-code-shadow) inset;
}

#write > pre.md-meta-block:first-child + h6 .v-badge-value,
#write > h6:first-child .v-badge-value {
    font-size: 1em !important;
}

// 封面内的作者信息
#write > pre.md-meta-block:first-child + h6 strong,
#write > pre.md-meta-block:first-child + h6 strong::before,
#write > h6:first-child strong,
#write > h6:first-child strong::before {
    color: @coverAuthorColor;
    font: normal 0.625em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-weight: normal !important;
    // font-size: 0.625em !important;
    // font-family: var(--v-f-fm-subtitle);
}

// 作者信息前缀
#write > pre.md-meta-block:first-child + h6 strong::before,
#write > h6:first-child strong::before {
    content: "By ";
    opacity: 0.6;
    display: block;
    margin-bottom: -1em;
}

// 封面内的版权信息
#write > pre.md-meta-block:first-child + h6 em,
#write > h6:first-child em {
    color: @coverOwnerColor;
    font: normal var(--v-f-w-bd) 0.4em var(--v-f-fm-subtitle); // [style] [weight] [size/[line-height]] [family]
    // font-style: normal !important;
    // font-weight: var(--v-f-w-bd);
    // font-size: 0.4em;
    // font-family: var(--v-f-fm-subtitle);
}

@import "media";
